Question

我有一个无序列表。每个都有2个按钮和一个输入。一个按钮会添加输入的当前值，另一个按钮会减去。

因为会有更多1

这是html：

<ul>
    <li>
        <button class="add">Add</button>
        <input type="text" value="0" />
        <button class="subtract">Subtract</button>
    </li>

    <li>
        <button class="add">Add</button>
        <input type="text" value="0" />
        <button class="subtract">Subtract</button>
    </li>

</ul>

我如何将每个

值的JQuery用作独立的？

Answer 1

这样的事情应该有效

$('.add').click(function() { 
   var $input = $(this).next();
   var currentValue = parseInt($input.val());
   $input.val(currentValue + 1);
});

$('.subtract').click(function() { 
   var $input = $(this).prev();
   var currentValue = parseInt($input.val());
   $input.val(currentValue - 1);
});

Answer 2

这应该有效：

$(document).ready(function(e){

    $(".add,.subtract").click(function(e){
        e.preventDefault();
        if($(this).hasClass("add")){

            var val = parseInt($(this).parents("li").find("[type='text']").val()) +1;
            $(this).parents("li").find("[type='text']").val( val );

        }else{

            var val = parseInt($(this).parents("li").find("[type='text']").val()) -1;
            $(this).parents("li").find("[type='text']").val( val );

        }
    });

});

Answer 3

使用jQuery的一种方法如下：

String

＆＃13;

// selecting the <li> elements,
// binding an anonymous event-handler for the 'click' event,
// when that event is fired on the '.add' or '.subtract' elements:
$('li').on('click', '.add, .subtract', function(e) {

  // caching a reference to the clicked element:
  var clicked = this;

  // finding the sibling <input> element(s) of the clicked element,
  // updating its value, via the val() method:
  $(this).siblings('input').val(function(i, v) {
    // i, is the index of the current element in the collection
    // v, is the current value - before we adjust it.

    // we convert the value-string 'v' into a base-ten number,
    // using parseInt(), and add either 1 or -1 to that number;
    // if the clicked element's classList contains the class-name
    // of 'add', we add the 1; otherwise we add a -1;
    // and return the result of that calculation:
    return parseInt(v, 10) + (clicked.classList.contains('add') ? 1 : -1);
  });
});

＆＃13;

$('li').on('click', '.add, .subtract', function(e) {
  var clicked = this;
  $(this).siblings('input').val(function(i, v) {
    return parseInt(v, 10) + (clicked.classList.contains('add') ? 1 : -1);
  });
});

＆＃13;

参考文献：

JavaScript的：
- Conditional (Ternary) operator。
- Element.classList API。
- Event.target。
- parseInt()。
jQuery的：
- on()。
- siblings()。
- val()。

JQuery在li中单击按钮的输入中添加/减去值

3 个答案: