javascript - jQuery - 数量增量数学

Question

如何获取每个 .count 的值，使其随每个 .item 的 .qty 输入中输入的值动态变化？

$(function() {
  $('.qtyplus').click(function(e) {
    e.preventDefault();
    fieldName = $(this).attr('field');
    var currentVal = parseInt($('input[name=' + fieldName + ']').val());
    if (!isNaN(currentVal)) {
      $('input[name=' + fieldName + ']').val(currentVal + 1);
    } else {
      $('input[name=' + fieldName + ']').val(0);
    }
  });
  $(".qtyminus").click(function(e) {
    e.preventDefault();
    fieldName = $(this).attr('field');
    var currentVal = parseInt($('input[name=' + fieldName + ']').val());
    if (!isNaN(currentVal) && currentVal > 0) {
      $('input[name=' + fieldName + ']').val(currentVal - 1);
    } else {
      $('input[name=' + fieldName + ']').val(0);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <div class="count">100</div>
  <div id='myform' method='POST' action='#'>
    <label for="">qty </label><input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
  </div>
</div>
<div class="item">
  <div class="count">75</div>
  <div id='myform' method='POST' action='#'>
    <label for="">qty </label><input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
  </div>
</div>

Answer 1

您可以使用 .closest 选择父元素，然后使用 .find 选择器仅选择该父元素内的那些元素。

通过选择 parent = $(this).closest('.item'); 更新了您的代码，然后使用 在该父级中查找 input 元素>$parent.find('input[name=' + fieldName + ']').

添加了函数updateCount()，并在开头设置了.count的val属性。

添加了 $('input[name=quantity]').keyup 事件。

下面是完整的代码。

$(function() {
  $('.count').each(function() {
    $(this).data('val', $(this).text());
  });

  $('input[name=quantity]').keyup(function() {   
      updateCount($(this).closest('.item').find('.count'), $(this));    
  });

  $('.qtyplus').click(function(e) {
    e.preventDefault();
    $parent = $(this).closest('.item');
    fieldName = $(this).attr('field');
    var currentVal = parseInt($parent.find('input[name=' + fieldName + ']').val());
    if (!isNaN(currentVal)) {
      $parent.find('input[name=' + fieldName + ']').val(currentVal + 1);
    } else {
      $parent.find('input[name=' + fieldName + ']').val(0);
    }
    updateCount($parent.find('.count'), $parent.find('input[name=' + fieldName + ']'));
  });
  $(".qtyminus").click(function(e) {
    e.preventDefault();
    $parent = $(this).closest('.item');
    fieldName = $(this).attr('field');
    var currentVal = parseInt($parent.find('input[name=' + fieldName + ']').val());
    if (!isNaN(currentVal) && currentVal > 0) {
      $parent.find('input[name=' + fieldName + ']').val(currentVal - 1);
    } else {
      $parent.find('input[name=' + fieldName + ']').val(0);
    }
    updateCount($parent.find('.count'), $parent.find('input[name=' + fieldName + ']'));
  });
});

function updateCount($count, $input) {
  $count.text(parseInt($count.data('val')) - (parseInt($input.val()) || 0));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <div class="count">100</div>
  <div id='myform' method='POST' action='#'>
    <label for="">qty </label>
    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
  </div>
</div>
<div class="item">
  <div class="count">75</div>
  <div id='myform' method='POST' action='#'>
    <label for="">qty </label>
    <input type='button' value='-' class='qtyminus' field='quantity' />
    <input type='text' name='quantity' value='0' class='qty' />
    <input type='button' value='+' class='qtyplus' field='quantity' />
  </div>
</div>