我在使用購物車產品 ++ 和 - 使用 jquery 和表單提交按鈕時遇到了一些問題點擊按鈕但只有第一個購物車產品正常工作而另一個不工作因為 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貢獻1839條經驗 獲得超15個贊
您對 ID 和 Class 有疑問
如果你想在他們點擊時提交，你需要這樣做：
請注意，我刪除了加號/減號按鈕上的所有內容并將 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 關注
- 132 瀏覽
添加回答
舉報
0/150
提交
取消