Jquery 单击锚点时的增量计数

我有下面的代码（在这里找到），它本身可以很好地工作

<a id="inc">Good</a>
<a id="dec">Bad</a>
<input type="text" name="qty" value="0" readonly="readonly" />

<script type="text/javascript">
  $(function(){
    $("#inc").click(function(){
      $(":text[name='qty']").val( Number($(":text[name='qty']").val()) + 1 );
    });
    $("#dec").click(function(){
      $(":text[name='qty']").val( Number($(":text[name='qty']").val()) - 1 );
    });
  });
</script>

很好
坏的
$（函数（）{
$（“#inc”）。单击（函数（）{
$（“：text[name='qty']”）val（数字（$（“：text[name='qty']”）val（））+1）；
});
$（“#dec”）。单击（函数（）{
$（“：text[name='qty']”）val（数字（$（“：text[name='qty']”）val（））-1）；
});
});

在同一页面上有多个实例的情况下，我很难找到使用此代码的最有效方法。显然，我会将ID更改为类，但是当单击时，如何使锚定只影响最近的文本输入？下一个选择器是否适用于此处？ 谢谢

是，下一步（）可以工作：

$(this).next(":text[name='qty']").val...

---

对要查找的每个项目使用类而不是ID，将它们分组到公共容器div中，查找与按下的inc/dec按钮位于同一容器中的输入并对其进行操作

这段代码适用于页面上的所有inc/dec/input集合，只要您将每个集合分组到一个公共容器div中

<div class="container">
    <a class="inc">Good</a>
    <a class="dec">Bad</a>
    <input class="qty" type="text" name="qty" value="0" readonly="readonly" />
</div>
<div class="container">
    <a class="inc">Good</a>
    <a class="dec">Bad</a>
    <input class="qty" type="text" name="qty" value="0" readonly="readonly" />
</div>
<div class="container">
    <a class="inc">Good</a>
    <a class="dec">Bad</a>
    <input class="qty" type="text" name="qty" value="0" readonly="readonly" />
</div>

<script type="text/javascript">
  $(function(){
    $(".inc").click(function(){
        var input = $(this).siblings(".qty");
        input.val(parseInt(input.val(), 10) + 1));
    });
    $(".dec").click(function(){
        var input = $(this).siblings(".qty");
        input.val(parseInt(input.val(), 10) - 1);
    });
  });
</script>

好
坏的
好
坏的
好
坏的
$（函数（）{
$（“.inc”）。单击（函数（）{
变量输入=$（this.sibbines（“.qty”）；
val（parseInt（input.val（），10）+1））；
});
$（“.dec”）。单击（函数（）{
变量输入=$（this.sibbines（“.qty”）；
val（parseInt（input.val（），10）-1）；
});
});

如果我的更新尚未添加，以下是工作代码：

<div class="container">
    <a class="inc">Good</a>
    <a class="dec">Bad</a>
    <input class="qty" type="text" name="qty" value="0" readonly="readonly" />
</div>
<div class="container">
    <a class="inc">Good</a>
    <a class="dec">Bad</a>
    <input class="qty" type="text" name="qty" value="0" readonly="readonly" />
</div>
<div class="container">
    <a class="inc">Good</a>
    <a class="dec">Bad</a>
    <input class="qty" type="text" name="qty" value="0" readonly="readonly" />
</div>

<script type="text/javascript">
  $(function(){
    $(".inc").click(function(){
        var input = $(this).siblings(".qty");
        input.val(parseFloat(input.val()) + 1);
    });
    $(".dec").click(function(){
        var input = $(this).siblings(".qty");
        input.val(parseFloat(input.val()) - 1);
    });
  });
</script>

好
坏的
好
坏的
好
坏的
$（函数（）{
$（“.inc”）。单击（函数（）{
变量输入=$（this.sibbines（“.qty”）；
val（parseFloat（input.val（））+1）；
});
$（“.dec”）。单击（函数（）{
变量输入=$（this.sibbines（“.qty”）；
val（parseFloat（input.val（））-1）；
});
});

---

使用

parseFloat（）

计算

input.val（）

，可以确保您增加的是浮点值，而不是在字符串后面追加“1”

这似乎只适用于与它相邻的一个-如果订单为“坏-好（数量输入）”则不适用。在这种情况下，只有好的才有效。我知道您的意思，但当按上述方式使用时，它会在输入中的字符串中添加一个数字。IE在01、011、0111等数字上单击良好结果…有什么想法吗？请参阅@jfriend00答案上的更新，在

input.val（）上添加
parseFloat（）
-在这里工作：添加
parseInt（）
所以它正确地进行了整数运算。没问题：）W3学校在这方面做得很好：@stevemanuel-我更新了我的答案，使用了
parseInt（）
。抢手货最好只是对我的答案进行评论或编辑以更正它（如果你有足够的分数这么做的话），而不是复制所有答案并进行一次更改。@jfriend00你们都是对的。我不想因为没有选择正确的答案而冒犯你们，也不想因为没有选择正确的答案而冒犯整个SO社区，所以我只选择了第一个答案。“我希望这没问题，谢谢你们两位的帮助。”史蒂夫曼纽尔，然后使用。MDN更可靠。如果你需要一个好的JS/CSS/HTML/。。来源，谷歌使用
mdn
@jfriend00-我编辑了你的答案，这就是为什么它现在是正确的。它必须首先得到批准，我认为这不是对脏鸟设计时间的必要利用。