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

Question

I am trying but failed to make a jquery event to increment/decrement input value on click add/sub button. It will work for each row separately.

 <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;
 });

Answer 1

You need to use .val() method to get/set its inputs value.

Identifiers in HTML must be unique , I would recommend you assign common class to button elements and use Class Selector ('.class') to target them.

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

Answer 2

Please try this -

$(this).siblings('input').val(--value);

in place of -

$(this).siblings('input').value = --value;