Question

如何获取每个.count的值，以便随着每个.qty的{{1}}输入中的值的变化而动态变化？

.item

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

Answer 1

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

通过选择parent = $(this).closest('.item');稍微更新了代码，然后使用input在该父对象中找到了$parent.find('input[name=' + fieldName + ']')个元素。

添加了功能updateCount()，并在开始时设置了val的{{1}}属性。

添加了.count事件。

下面是完整的代码。

$('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));
}

Answer 2

function qtyplus(id) {
  var selectedInput = $('#' + id + ' input[name=quantity]');
  var inputValue = $('#' + id + ' input[name=quantity]').val();
  if (!isNaN(inputValue)) {
    selectedInput.val(parseInt(inputValue) + 1);
  } else {
    selectedInput.val(0);
  }
  var count = $('#' + id + ' .count');
  count.html(parseInt(count.html()) - 1);
}

function qtyminus(id) {
  var selectedInput = $('#' + id + ' input[name=quantity]');
  var inputValue = $('#' + id + ' input[name=quantity]').val();
  if (!isNaN(inputValue)) {
    selectedInput.val(parseInt(inputValue) - 1);
  } else {
    selectedInput.val(0);
  }
  var count = $('#' + id + ' .count');
  count.html(parseInt(count.html()) - 1);
}

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

jQuery-数量增量数学

2 个答案: