为什么我第一次点击+按钮没有增加输入值？

Question

我制作了一个快速脚本，它将更新 2 个按钮之间的<input>字段中的数字，但是当我单击+按钮最初它不起作用时，在第一次按下后它开始按预期从第二次单击开始工作rest 的点击次数。 单击-按钮首先按预期工作。

 // 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>

Answer 1

这里的主要原因是您使用 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的值。

有很多修复，一个快速的解决方案是在.quanity选择器前加上input （变为input.quantity ），以仅针对input ，从而获得预期的结果。

这是一个应用了修复的演示：

 // 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>

var price = parseInt(service.find(".price").val().replace(/,/g, ""))行会引发错误，因为您的HTML没有price为 class 的元素导致试图在undefined上执行replace方法。

无论如何，我只是想警告你，修复不在我的答案的 scope 中（尽管如果需要，我很乐意提供进一步的帮助）。

Answer 2

它的破坏是因为您的输入元素有一个 class.quantity ，它也是一个 div 元素上的 class 。 函数 setNewQuantity() 和 getCurrentQuantity() 中的 find 方法正在选择将其值评估为 0 的 div，因为 div 标签不存在值。 在第一次单击时，零计算为 1，这也是您输入标签中的值，因此它似乎没有视觉效果。 将您的功能更改为

// 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);
}

Answer 3

我认为这是因为您在getCurrentQuantity() function 中使用了Number() 。