javascript - 如何为每个jquery兄弟的add/sub值创建click事件

我正在尝试，但是在单击添加/子按钮时无法使一个jquery事件增加/减少输入值。它将分别为每一行工作。

 <tr>
    <td>
        <button id="SUB">SUB</button>
        <input type="number" name="" id="" value="1">
        <button id="ADD">ADD</button>
    </td>
    <td>
        <button id="SUB">SUB</button>
        <input type="number" name="" id="" value="1">
        <button id="ADD">ADD</button>
    </td>
    <td>
        <button id="SUB">SUB</button>
        <input type="number" name="" id="" value="1">
        <button id="ADD">ADD</button>
    </td>
    <td>
        <button id="SUB">SUB</button>
        <input type="number" name="" id="" value="1">
        <button id="ADD">ADD</button>
    </td>
</tr>

 $(document).on('click', '#add', function(){
    var value  = $(this).siblings('input').val();
    $(this).siblings('input').value = ++value;
 });
 $(document).on('click', '#sub', function(){
    var value  = $(this).siblings('input').val();
    $(this).siblings('input').value = --value;
 });

最佳答案

您需要使用.val()方法来获取/设置其输入值。

HTML中的标识符必须唯一，我建议您为按钮元素分配通用类，并使用Class Selector ('.class')定位它们。

$(document).on('click', '.add', function() {
  $(this).siblings('input').val(function(_, value) {
    if (value == undefined)
      return 0;

    return parseInt(value, 10) + 1;
  });

});
$(document).on('click', '.sub', function() {
  $(this).siblings('input').val(function(_, value) {
    if (value == undefined)
    return 0;

    return parseInt(value, 10) - 1;
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
  <td>
    <button class="sub">SUB</button>
    <input type="number" name="" id="" value="1">
    <button class="add">ADD</button>
  </td>
  <td>
    <button class="sub">SUB</button>
    <input type="number" name="" id="" value="1">
    <button class="add">ADD</button>
  </td>
  <td>
    <button class="sub">SUB</button>
    <input type="number" name="" id="" value="1">
    <button class="add">ADD</button>
  </td>
  <td>
    <button class="sub">SUB</button>
    <input type="number" name="" id="" value="1">
    <button class="add">ADD</button>
  </td>
</tr>
</table>