jquery - 单击 anchor 时增加计数

Question

我有以下代码(在这里找到)，它本身可以正常工作

<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>

当您在同一页面上有多个实例时，我无法找到使用此代码的最有效方法。显然我会将 ID 更改为类，但是如何使 anchor 在单击时仅影响最接近它的文本输入？ :next 选择器在这里适用吗？谢谢!

Answer 1

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

只要将每个 inc/dec/input 集分组到一个公共(public)容器 div 中，此代码块就适用于页面上的所有 inc/dec/input 集。

<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>