考虑下面的代码,我想计算价格和数量字段的乘积。
每次单击更新按钮时,它都会显示 NAN。
对于数量字段,我使用加号和减号按钮来增加/减少数量。
我实际上不知道如何调试这个特定问题。
$('.btn-number').click(function(e) {
e.preventDefault();
fieldName = $(this).attr('data-field');
type = $(this).attr('data-type');
var input = $("input[name='" + fieldName + "']");
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
if (type == 'minus') {
if (currentVal > input.attr('min')) {
input.val(currentVal - 1).change();
}
if (parseInt(input.val()) == input.attr('min')) {
$(this).attr('disabled', true);
}
} else if (type == 'plus') {
if (currentVal < input.attr('max')) {
input.val(currentVal + 1).change();
}
if (parseInt(input.val()) == input.attr('max')) {
$(this).attr('disabled', true);
}
}
} else {
input.val(0);
}
});
$('.input-number').focusin(function() {
$(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {
minValue = parseInt($(this).attr('min'));
maxValue = parseInt($(this).attr('max'));
valueCurrent = parseInt($(this).val());
name = $(this).attr('name');
if (valueCurrent >= minValue) {
$(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
} else {
$(this).val($(this).data('oldValue'));
}
if (valueCurrent <= maxValue) {
$(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
} else {
$(this).val($(this).data('oldValue'));
}
});
$(".input-number").keydown(function(e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
function calculate() {
var num1 = document.getElementById('PPRICE').value;
var num2 = document.getElementById('QTY').value;
var update = num1 * num2;
document.getElementById("TOTAL").innerHTML = update;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" class="shop_table cart">
<thead>
<tr>
<th class="product-id">Product Id</th>
<th class="product-name">Product</th>
<th class="product-price">Price</th>
<th class="product-quantity">Quantity</th>
<th class="product-subtotal">Total</th>
<th class="product-remove"> </th>
</tr>
</thead>
<tbody>
<tr class="cart_item">
<td class="product-id" valign="center">
<a title="Remove this item" class="remove" href="#">P521</a>
</td>
<td class="product-name" valign="middle">
<a href="single-product.html">Ship Your Idea</a>
</td>
<td class="product-price" valign="middle">
<span id="PPRICE" class="amount" value="15">$15.00</span>
</td>
<td class="product-quantity">
<div class="quantity buttons_added">
<input type="button" class="minus btn-number" value="-" data-type="minus" data-field="num">
<input type="number" id="QTY" name="num" value="0" min="0" max="5" class="input-text qty text input-number" title="Qty">
<input type="button" class="plus btn-number" value="+" data-type="plus" data-field="num"> ea.
</div>
</td>
<td class="product-subtotal" valign="middle">
<span id="TOTAL" class="amount">$15.00</span>
</td>
<td class="product-remove">
<a title="Remove this item" class="remove" href="#">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>
<tr>
<td class="actions" colspan="7">
<div class="coupon" style="display: none;">
<label for="coupon_code">Coupon:</label>
<input type="text" placeholder="Coupon code" value="" id="coupon_code" class="input-text" name="coupon_code">
<input type="submit" value="Apply Coupon" name="apply_coupon" class="button">
</div>
<input type="button" id="update" value="Update Cart" name="update_cart" class="button" onClick="calculate()">
</td>
</tr>
</tbody>
</table>
最佳答案
span
没有 value
属性。更重要的是,作为 Javascript DOM 对象, span
没有 value
属性(您可以通过 Javascript 添加该属性,但这只会使事情变得更加困难)。
相反,使用 data-value
属性。 data-
-attributes 已作为 通用 属性引入,可用于任何 HTML 元素。
您可以自由命名数据属性,只要它们的名称以 data-
开头。在您的示例中,您还可以将其命名为 data-price
并使用 PPRICE.dataset.price
访问它。请注意,如果您使用包含多个破折号的名称(如 data-product-price
),破折号会在元素的 dataset
上自动转换为驼峰式(PPRICE.dataset.productPrice
)。
$('.btn-number').click(function(e) {
e.preventDefault();
fieldName = $(this).attr('data-field');
type = $(this).attr('data-type');
var input = $("input[name='" + fieldName + "']");
var currentVal = parseInt(input.val());
if (!isNaN(currentVal)) {
if (type == 'minus') {
if (currentVal > input.attr('min')) {
input.val(currentVal - 1).change();
}
if (parseInt(input.val()) == input.attr('min')) {
$(this).attr('disabled', true);
}
} else if (type == 'plus') {
if (currentVal < input.attr('max')) {
input.val(currentVal + 1).change();
}
if (parseInt(input.val()) == input.attr('max')) {
$(this).attr('disabled', true);
}
}
} else {
input.val(0);
}
});
$('.input-number').focusin(function() {
$(this).data('oldValue', $(this).val());
});
$('.input-number').change(function() {
minValue = parseInt($(this).attr('min'));
maxValue = parseInt($(this).attr('max'));
valueCurrent = parseInt($(this).val());
name = $(this).attr('name');
if (valueCurrent >= minValue) {
$(".btn-number[data-type='minus'][data-field='" + name + "']").removeAttr('disabled')
} else {
$(this).val($(this).data('oldValue'));
}
if (valueCurrent <= maxValue) {
$(".btn-number[data-type='plus'][data-field='" + name + "']").removeAttr('disabled')
} else {
$(this).val($(this).data('oldValue'));
}
});
$(".input-number").keydown(function(e) {
// Allow: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
// Allow: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Allow: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// let it happen, don't do anything
return;
}
// Ensure that it is a number and stop the keypress
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
function calculate() {
var num1 = document.getElementById('PPRICE').dataset.value;
var num2 = document.getElementById('QTY').value;
var update = num1 * num2;
document.getElementById("TOTAL").innerHTML = `$ ${update.toFixed(2)}`;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellspacing="0" class="shop_table cart">
<thead>
<tr>
<th class="product-id">Product Id</th>
<th class="product-name">Product</th>
<th class="product-price">Price</th>
<th class="product-quantity">Quantity</th>
<th class="product-subtotal">Total</th>
<th class="product-remove"> </th>
</tr>
</thead>
<tbody>
<tr class="cart_item">
<td class="product-id" valign="center">
<a title="Remove this item" class="remove" href="#">P521</a>
</td>
<td class="product-name" valign="middle">
<a href="single-product.html">Ship Your Idea</a>
</td>
<td class="product-price" valign="middle">
<span id="PPRICE" class="amount" data-value="15">$15.00</span>
</td>
<td class="product-quantity">
<div class="quantity buttons_added">
<input type="button" class="minus btn-number" value="-" data-type="minus" data-field="num">
<input type="number" id="QTY" name="num" value="0" min="0" max="5" class="input-text qty text input-number" title="Qty">
<input type="button" class="plus btn-number" value="+" data-type="plus" data-field="num"> ea.
</div>
</td>
<td class="product-subtotal" valign="middle">
<span id="TOTAL" class="amount">$15.00</span>
</td>
<td class="product-remove">
<a title="Remove this item" class="remove" href="#">
<span class="glyphicon glyphicon-trash"></span>
</a>
</td>
</tr>
<tr>
<td class="actions" colspan="7">
<div class="coupon" style="display: none;">
<label for="coupon_code">Coupon:</label>
<input type="text" placeholder="Coupon code" value="" id="coupon_code" class="input-text" name="coupon_code">
<input type="submit" value="Apply Coupon" name="apply_coupon" class="button">
</div>
<input type="button" id="update" value="Update Cart" name="update_cart" class="button" onClick="calculate()">
</td>
</tr>
</tbody>
</table>
关于javascript - 字段值的乘法,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/51999653/