我正在设计购物车网站。和新鲜的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/

10-12 12:39
查看更多