[英]Why does my first click on the + button not increase the value of the input?
I made a quick script that will update the number in the <input>
field between the 2 buttons, but when I click the +
button initially it doesn't work, after the first press it begins working as expected from the 2nd click and for the rest of the clicks.我制作了一个快速脚本,它将更新 2 个按钮之间的
<input>
字段中的数字,但是当我单击+
按钮最初它不起作用时,在第一次按下后它开始按预期从第二次单击开始工作rest 的点击次数。 Clicking the -
button first works as expected.单击
-
按钮首先按预期工作。
// click + button $(".inc").click(function(){ service = $(this).closest(".service-option-card"); let quantity = getCurrentQuantity(service); let newQuantity = quantity+1; setNewQuantity(newQuantity, service); updatePrice(newQuantity, service); }); // click - button $(".dec").click(function(){ service = $(this).closest(".service-option-card"); let quantity = getCurrentQuantity(service); let newQuantity = quantity-1; if(newQuantity <= 0) { let newQuantity = 0 setNewQuantity(newQuantity, service); } else { setNewQuantity(newQuantity, service); } updatePrice(newQuantity, $(this).closest(".service-option-card")); }); // Get current number function getCurrentQuantity(service) { let quantity_str = service.find(".quantity").val(); quantity_num = Number(quantity_str); return quantity_num; } // Set new Number function setNewQuantity(quantity, service) { service.find(".quantity").val(quantity); } // Update Price function updatePrice(quantity, service) { var price = parseInt(service.find(".price").val().replace(/,/g, "")); var total = quantity * price; if(total < 0) { total = 0; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="service-option-card" data-monthly="10"> <div class="quantity"> <button class="btn btn-quantity dec">-</button> <input class="quantity-input quantity" value="1"> <button class="btn btn-quantity inc">+</button> </div> </div>
The main reason here is that you're using the class .quantity
to get the input
's value that happens to be also set to the input
's parent div
so when let quantity_str = service.find(".quantity").val()
is executed, precisely the find
method that is called on service
, the div
with class .service-option-card
which is the parent of both the div.quantity
and input.quantity
, then find
method will match both the the div
and the input
thus you won't get the input
's value as expected.这里的主要原因是您使用 class
.quantity
来获取input
的值,该值恰好也设置为input
的父div
所以当let quantity_str = service.find(".quantity").val()
被执行,正是在service
上调用的find
方法,带有 class .service-option-card
的div
是div.quantity
和input.quantity
的父级,然后find
方法将匹配div
和input
,因此您不会按预期获得input
的值。
There are many fixes, a quick solution is to prefix the .quanity
selector with input
(becomes input.quantity
) to only target the input
and thus you get the expected result.有很多修复,一个快速的解决方案是在
.quanity
选择器前加上input
(变为input.quantity
),以仅针对input
,从而获得预期的结果。
Here's a demo with the fix applied:这是一个应用了修复的演示:
// click + button $(".inc").click(function(){ service = $(this).closest(".service-option-card"); let quantity = getCurrentQuantity(service); let newQuantity = quantity+1; setNewQuantity(newQuantity, service); updatePrice(newQuantity, service); }); // click - button $(".dec").click(function(){ service = $(this).closest(".service-option-card"); let quantity = getCurrentQuantity(service); let newQuantity = quantity-1; if(newQuantity <= 0) { let newQuantity = 0 setNewQuantity(newQuantity, service); } else { setNewQuantity(newQuantity, service); } updatePrice(newQuantity, $(this).closest(".service-option-card")); }); // Get current number function getCurrentQuantity(service) { let quantity_str = service.find("input.quantity").val(); quantity_num = Number(quantity_str); return quantity_num; } // Set new Number function setNewQuantity(quantity, service) { service.find("input.quantity").val(quantity); } // Update Price function updatePrice(quantity, service) { var price = parseInt(service.find(".price").val().replace(/,/g, "")); var total = quantity * price; if(total < 0) { total = 0; } }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="service-option-card" data-monthly="10"> <div class="quantity"> <button class="btn btn-quantity dec">-</button> <input class="quantity-input quantity" value="1"> <button class="btn btn-quantity inc">+</button> </div> </div>
The line
var price = parseInt(service.find(".price").val().replace(/,/g, ""))
throws an error because yourHTML
doesn't have an element having theprice
class which leads to trying to executereplace
method onundefined
.var price = parseInt(service.find(".price").val().replace(/,/g, ""))
行会引发错误,因为您的HTML
没有price
为 class 的元素导致试图在undefined
上执行replace
方法。Anyway, I just wanted to warn you about that, the fix is out of the scope of my answer (though I'll happily provide further help if needed).
无论如何,我只是想警告你,修复不在我的答案的 scope 中(尽管如果需要,我很乐意提供进一步的帮助)。
Its breaking because your input element has a class.quantity which is also a class on a div element.它的破坏是因为您的输入元素有一个 class.quantity ,它也是一个 div 元素上的 class 。 The find method in the functions setNewQuantity() and getCurrentQuantity() are picking the div which evaluates its value to 0 because value doesn't exist for the div tag.
函数 setNewQuantity() 和 getCurrentQuantity() 中的 find 方法正在选择将其值评估为 0 的 div,因为 div 标签不存在值。 On the first click, the zero evaluates to 1 which also is the value in your input tag, hence it doesnt seem to have a visual effect.
在第一次单击时,零计算为 1,这也是您输入标签中的值,因此它似乎没有视觉效果。 change your functions to
将您的功能更改为
// Get current number
function getCurrentQuantity(service) {
console.log({service})
let quantity_str = service.find("input.quantity").val();
console.log({quantity_str})
quantity_num = Number(quantity_str);
return quantity_num;
}
// Set new Number
function setNewQuantity(quantity, service) {
service.find("input.quantity").val(quantity);
}
I think it's because you're using Number()
in your getCurrentQuantity()
function.我认为这是因为您在
getCurrentQuantity()
function 中使用了Number()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.