当我按下数量按钮
时,我收到以下错误消息。
"Uncaught TypeError: Cannot read property 'val' of undefined"
var current = parseInt($input.val()) || 0;
使用当前代码,keyup
函数可以工作(如果我键入一个值,计数和总数会更新)。
但是,如果我:
a) remove
[$input]
fromfunction updateCount($update, $input)
b) change
var current = parseInt($input.val()) || 0;
from[$input]
to[$value]
keyup
功能停止工作,按钮
突然工作。
这是怎么回事?如何让代码同时适用于 keyup
和 button
功能?
$(function() {
$(".count").each(function() {
$(this).data("val", $(this).text());
});
$("input[name=quantity]").keyup(function() {
updateCount(
$(this)
.closest(".items__item")
.find(".count"),
$(this)
);
});
$(".qty-button").click(function(e) {
e.preventDefault();
updateCount($(this));
});
});
function updateCount($update, $input) {
var $item = $update.closest(".items__item");
var fieldName = $update.attr("field");
var $max = $item.find(".count");
var $value = $item.find("input[name=" + fieldName + "]");
var operation = $update.val();
var limit = parseInt($max.data("val"));
var current = parseInt($input.val()) || 0;
var cost = $update.closest(".items__item").find(".cost").text().replace("$", "");
var $total = $update.closest(".items__item").find(".total");
$update.text(parseInt(limit - current));
$total.text(cost * current);
$total.closest(".total").prepend("$");
if (current > limit) {
$value.val(limit);
$max.text('0');
return;
}
if (current < 0) {
$value.val("0");
$max.text(limit);
return;
}
//increment controller
if (operation == "+") {
if (current + 1 <= limit && limit - current - 1 >= 0) {
$value.val(current + 1);
$max.text(limit - current - 1);
}
} else if (operation == "-") {
if (current - 1 >= 0) {
$value.val(current - 1);
$max.text(limit - current + 1);
}
}
}
$(".qty").on("keydown keyup", function(e) {
if (
$(this).val() >
parseInt(
$(this)
.closest(".items__item")
.find(".count")
.data("val")
) &&
e.keyCode !== 46 && // keycode for delete
e.keyCode !== 8 // keycode for backspace
) {
e.preventDefault();
$(this).val(
parseInt(
$(this)
.closest(".items__item")
.find(".count")
.data("val")
)
);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="qty-total">$0</div>
<div class="items__list">
<div class="items__item">
<div class="count" data-val="3">3</div>
<div class="cost">$50</div>
<div id='myform'>
<label for="">qty </label>
<input type='text' name='quantity' placeholder='amount...' value='0' class='qty' />
<input type='button' value="-" class='qty-button qtyminus' field='quantity' />
<input type='button' value="+" class='qty-button qtyplus' field='quantity' />
<div class="total"></div>
</div>
</div>
<div class="items__item">
<div class="count" data-val="5">5</div>
<div class="cost">$70</div>
<div id='myform'>
<label for="">qty </label>
<input type='text' name='quantity' placeholder='amount...' value='0' class='qty' />
<input type='button' value='-' class='qty-button qtyminus' field='quantity' />
<input type='button' value='+' class='qty-button qtyplus' field='quantity' />
<div class="total"></div>
</div>
</div>
</div>
最佳答案
因为您没有在单击按钮时传递 input 元素,并且在这种情况下它是 undefined
所以在评估 input
的值之前添加 condition check
>
var current = 0;
if($input) { current = parseInt($input.val()) || 0; }
$(function() {
$(".count").each(function() {
$(this).data("val", $(this).text());
});
$("input[name=quantity]").keyup(function() {
updateCount(
$(this)
.closest(".items__item")
.find(".count"),
$(this)
);
});
$(".qty-button").click(function(e) {
e.preventDefault();
updateCount($(this));
});
});
function updateCount($update, $input) {
var $item = $update.closest(".items__item");
var fieldName = $update.attr("field");
var $max = $item.find(".count");
var $value = $item.find("input[name=" + fieldName + "]");
var operation = $update.val();
var limit = parseInt($max.data("val"));
var current = 0;
if($input) { current = parseInt($input.val()) || 0; }
var cost = $update.closest(".items__item").find(".cost").text().replace("$", "");
var $total = $update.closest(".items__item").find(".total");
$update.text(parseInt(limit - current));
$total.text(cost * current);
$total.closest(".total").prepend("$");
if (current > limit) {
$value.val(limit);
$max.text('0');
return;
}
if (current < 0) {
$value.val("0");
$max.text(limit);
return;
}
//increment controller
if (operation == "+") {
if (current + 1 <= limit && limit - current - 1 >= 0) {
$value.val(current + 1);
$max.text(limit - current - 1);
}
} else if (operation == "-") {
if (current - 1 >= 0) {
$value.val(current - 1);
$max.text(limit - current + 1);
}
}
}
$(".qty").on("keydown keyup", function(e) {
if (
$(this).val() >
parseInt(
$(this)
.closest(".items__item")
.find(".count")
.data("val")
) &&
e.keyCode !== 46 && // keycode for delete
e.keyCode !== 8 // keycode for backspace
) {
e.preventDefault();
$(this).val(
parseInt(
$(this)
.closest(".items__item")
.find(".count")
.data("val")
)
);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="qty-total">$0</div>
<div class="items__list">
<div class="items__item">
<div class="count" data-val="3">3</div>
<div class="cost">$50</div>
<div id='myform'>
<label for="">qty </label>
<input type='text' name='quantity' placeholder='amount...' value='0' class='qty' />
<input type='button' value="-" class='qty-button qtyminus' field='quantity' />
<input type='button' value="+" class='qty-button qtyplus' field='quantity' />
<div class="total"></div>
</div>
</div>
<div class="items__item">
<div class="count" data-val="5">5</div>
<div class="cost">$70</div>
<div id='myform'>
<label for="">qty </label>
<input type='text' name='quantity' placeholder='amount...' value='0' class='qty' />
<input type='button' value='-' class='qty-button qtyminus' field='quantity' />
<input type='button' value='+' class='qty-button qtyplus' field='quantity' />
<div class="total"></div>
</div>
</div>
</div>
关于javascript - 带有 keyup 和按钮的 parseInt,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51550272/