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改为类，但是如何点击锚点只会影响最接近它的文本输入？下一个选择器适用于此处吗？ THX！

Answer 1

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

这段代码适用于您在页面上的所有inc / dec /输入集，只要您将它们分组到一个公共容器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>

Answer 2

如果我的更新尚未添加，请输入以下代码：

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

使用input.val()评估parseFloat()将确保您增加浮点值而不将“1”附加到字符串。

Answer 3

是的next（）可行：

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

单击锚点时的增量计数

3 个答案: