我在使用購物車產(chǎn)品 ++ 和 - 使用 jquery 和表單提交按鈕時遇到了一些問題點擊按鈕但只有第一個購物車產(chǎn)品正常工作而另一個不工作因為 Id 問題請參考我的代碼如下：$(document).ready(function() { $('.plus').click(function() { var num = parseInt($('#quantity').val()); if (num == 10) { num = 10; } else { num++; } $('#quantity').val(num); }); $('.minus').click(function() { var num = parseInt($('#quantity').val()); if (num == 1) { num = 1; } else { num--; } $('#quantity').val(num); });});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/><form method='post' action=''> <input type='hidden' name='code' value="1234" /> <input type='hidden' name='action' value="change" /> <div class="qty input-group pb-1"> <span class="input-group-btn"> <button class="btn btn-theme-round btn-number minus" type="button">-</button> </span> <input type="text" value="0" name="quantity" id="quantity_1234" class="quantity"> <span class="input-group-btn"> <button class="btn btn-theme-round btn-number plus" type="button">+</button> </span> </div></form><form method='post' action=''> <input type='hidden' name='code' value="5678" /> <input type='hidden' name='action' value="change" /> <div class="qty input-group pb-1"> <span class="input-group-btn"> <button class="btn btn-theme-round btn-number minus" type="button">-</button> </span> <input type="text" value="0" name="quantity" id="quantity_5678" class="quantity"> <span class="input-group-btn"> <button class="btn btn-theme-round btn-number plus" type="button">+</button> </span> </div></form>
1 回答
紫衣仙女
TA貢獻(xiàn)1839條經(jīng)驗 獲得超15個贊
您對 ID 和 Class 有疑問
如果你想在他們點擊時提交，你需要這樣做：
請注意，我刪除了加號/減號按鈕上的所有內(nèi)容并將 ID 移至班級
$(function() {
$('.btn-number').click(function() {
const $form = $(this).closest("form");
var num = +$('.quantity',$form).val();
num += $(this).hasClass("plus") ? 1 : -1; // which button?
if (num >= 10) {
num = 10;
} else if (num <= 0) {
num = 0;
}
$('.quantity',$form).val(num);
// $form.submit(); // uncomment to submit
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<form method='post' action=''>
<input type='hidden' name='code' value="1234" />
<input type='hidden' name='action' value="change" />
<div class="qty input-group pb-1">
<span class="input-group-btn">
<button class="btn btn-theme-round btn-number minus" type="button">-</button>
</span>
<input type="text" value="0" name="quantity" id="quantity_1234" class="quantity">
<span class="input-group-btn">
<button class="btn btn-theme-round btn-number plus" type="button">+</button>
</span>
</div>
</form>
<form method='post' action=''>
<input type='hidden' name='code' value="5678" />
<input type='hidden' name='action' value="change" />
<div class="qty input-group pb-1">
<span class="input-group-btn">
<button class="btn btn-theme-round btn-number minus" type="button">-</button>
</span>
<input type="text" value="0" name="quantity" id="quantity_5678" class="quantity">
<span class="input-group-btn">
<button class="btn btn-theme-round btn-number plus" type="button">+</button>
</span>
</div>
</form>
- 1 回答
- 0 關(guān)注
- 140 瀏覽
添加回答
舉報
0/150
提交
取消