我正在设计购物车网站。和新鲜的jQuery我的布局是
我想在按加号和减号按钮时将值增加和减少1。价格的总价值也应更改。我尝试了以下jQuery代码。
//Add and Subtract
$("#add").on('click',function()
{
if(parseInt($("#total input").val())>=0)
$("#total input").val(parseInt($("#total input").val())+1);
});
$("#sub").on('click',function()
{
if(parseInt($("input").val())>0)
$("#total input").val(parseInt($("#total input").val())-1);
});
我的html代码是:
<div class="btn_group" id="total">
<a href="#" class="btn_add_subtract" id="add">
+
</a>
<input type="text" class="quantity_value" value="0"/>
<a href="#" class="btn_add_subtract" id="sub">
-
</a>
</div>
但是我的问题是。
当我递增和递减值时,所有列表数据都将更改。谁能告诉我更好的方法,以便我做到。
谢谢
最佳答案
问题的基本原理如下,唯一需要更改的是将如何相对于单击的按钮找到input
元素。
由于我们有多个按钮必须具有相同的功能,因此我们应该对这些元素使用相同的类(添加/减少按钮),以便我们可以轻松地将它们作为目标。
$('.add').click(function() {
$(this).prev().val(function(i, val) {
return (+val || 0) + 1;
});
});
$('.minus').click(function() {
$(this).next().val(function(i, val) {
val = (+val || 0) - 1;
return val < 0 ? 0 : val;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<span class="minus">-</span><input name="x"/><span class="add">+</span>
</div>
<div>
<span class="minus">-</span><input name="x"/><span class="add">+</span>
</div>
<div>
<span class="minus">-</span><input name="x"/><span class="add">+</span>
</div>
关于jquery - 使用jQuery对不同ID进行加法乘法,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30316973/