Question

我的购物车中有计数器，我正在努力让控件只针对我所在的特定计数器。相反，它会更新它们。

＆＃13;

// Product Counter
DecreaseCount = function(){
  var count = $(".quantity__count").val();
  if (count > 0) count--;
  if (count == 0) count = 0;
  $(".quantity__count").val(count);
}

IncreaseCount = function(){
  var count = $('.quantity__count').val();
  if (count < 99) count++;
  if (count == 99) count = 99;
  $('.quantity__count').val(count);
}

// Does both
$('.quantity__decrement').click(function(){
  DecreaseCount();
});
$('.quantity__increment').click(function(){
  IncreaseCount();
});


// What I've tried
//$('.quantity__decrement').each(function(){
//  $(this).on("click", function(){
//    debugger;
//    var count = $(".quantity__count").val();
//    if (count > 0) count--;
//    if (count == 0) count = 0;
//    $(".quantity__count").val(count);
//  }); 
//});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="o-grid o-grid--no-gutter">  
  <div class="quantity o-grid__cell">
    <div class="quantity__decrement">-</div>
    <input type="num" class="quantity__count" value="0" />
    <div class="quantity__increment">+</div>
  </div>
</div>


<div class="o-grid o-grid--no-gutter">
  <div class="quantity o-grid__cell">
    <div class="quantity__decrement">-</div>
    <input type="num" class="quantity__count" value="0" />
    <div class="quantity__increment">+</div>
  </div>
</div>

＆＃13;

我尝试过使用.closest，.siblings等;我有点难过，我知道这不是一件很棘手的事情。

感谢任何帮助！

Answer 1

您可以使用函数<canvas id="canvas"></canvas>选择siblings字段，并将该元素绑定为quantity__count上下文，以提供更清晰的方法。

this

// Product Counter
DecreaseCount = function() {
              // +--- context this with the selected element.
              // |
              // v
  var count = $(this).val();
  if (count > 0) count--;
  if (count == 0) count = 0;
  $(this).val(count);
}

IncreaseCount = function() {
              // +--- context this with the selected element.
              // |
              // v
  var count = $(this).val();
  if (count < 99) count++;
  if (count == 99) count = 99;
  $(this).val(count);
}

// Does both
$('.quantity__decrement').click(function() {
  var target = $(this).siblings('[class="quantity__count"]').get(0);
                    // +--- Bind the function with the selected element.
                    // |
                    // v
  DecreaseCount.bind(target)();
});

$('.quantity__increment').click(function() {
  var target = $(this).siblings('[class="quantity__count"]').get(0);
                    // +--- Bind the function with the selected element.
                    // |
                    // v
  IncreaseCount.bind(target)();
});

Answer 2

我会在每个项目上绑定click事件：

＆＃13;

$('.quantity__decrement').each(function(){
  $(this).on('click', function(){
    var quantityCount = $(this).siblings('.quantity__count');
    var count = quantityCount.val();
    if (count > 0) count--;
    if (count == 0) count = 0;
    quantityCount.val(count);
  });
});


$('.quantity__increment').each(function(){
  $(this).on('click', function(){
    var quantityCount = $(this).siblings('.quantity__count');
    var count = quantityCount.val();
    if (count < 99 ) count++;
    if (count == 99) count = 99;
    quantityCount.val(count);
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="o-grid o-grid--no-gutter">  
    <div class="quantity o-grid__cell">
      <div class="quantity__decrement">-</div>
      <input type="num" class="quantity__count" value="0" />
      <div class="quantity__increment">+</div>
    </div>
  </div>
  
  
  <div class="o-grid o-grid--no-gutter">
    <div class="quantity o-grid__cell">
      <div class="quantity__decrement">-</div>
      <input type="num" class="quantity__count" value="0" />
      <div class="quantity__increment">+</div>
    </div>
  </div>

＆＃13;

您也可以使用e.target实现它，如下所示：

＆＃13;

    // Product Counter
    DecreaseCount = function(element){
      var quantityCount = $(element).siblings('.quantity__count');
      var count = quantityCount.val();
      if (count > 0) count--;
      if (count == 0) count = 0;
      quantityCount.val(count);
    }
    
    IncreaseCount = function(element){
      var quantityCount = $(element).siblings('.quantity__count');
      var count = quantityCount.val();
      if (count < 99) count++;
      if (count == 99) count = 99;
      quantityCount.val(count);
    }
    
    // Does both
    $('.quantity__decrement').click(function(e){
      DecreaseCount(e.target);
    });
    $('.quantity__increment').click(function(e){
      IncreaseCount(e.target);
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="o-grid o-grid--no-gutter">  
    <div class="quantity o-grid__cell">
      <div class="quantity__decrement">-</div>
      <input type="num" class="quantity__count" value="0" />
      <div class="quantity__increment">+</div>
    </div>
  </div>
  
  
  <div class="o-grid o-grid--no-gutter">
    <div class="quantity o-grid__cell">
      <div class="quantity__decrement">-</div>
      <input type="num" class="quantity__count" value="0" />
      <div class="quantity__increment">+</div>
    </div>
  </div>

＆＃13;

Answer 3

如果您的HTML不会改变，您只需使用.next()和.prev()选择器。

为了使其更通用，您可以使用$(this).parent().find('.quantity__count')。

Answer 4

数据的一些基本用法可以解决您的问题。

// Product Counter
DecreaseCount = function(ID){
  var count = $("#pro"+ID).val();
  if (count > 0) count--;
  if (count == 0) count = 0;
  $("#pro"+ID).val(count);
}

IncreaseCount = function(ID){
  var count = $("#pro"+ID).val();
  if (count < 99) count++;
  if (count == 99) count = 99;
  $("#pro"+ID).val(count);
}

// Does both
$('.quantity__decrement').click(function(){
  DecreaseCount($(this).data("id"));
});
$('.quantity__increment').click(function(){
  IncreaseCount($(this).data("id"));
});


// What I've tried
//$('.quantity__decrement').each(function(){
//  $(this).on("click", function(){
//    debugger;
//    var count = $(".quantity__count").val();
//    if (count > 0) count--;
//    if (count == 0) count = 0;
//    $(".quantity__count").val(count);
//  }); 
//});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="o-grid o-grid--no-gutter">  
  <div class="quantity o-grid__cell">
    <div data-id="2" class="quantity__decrement">-</div>
    <input id="pro2" type="num" class="quantity__count" value="0" />
    <div data-id="2" class="quantity__increment">+</div>
  </div>
</div>


<div class="o-grid o-grid--no-gutter">
  <div class="quantity o-grid__cell">
    <div data-id="1" class="quantity__decrement">-</div>
    <input id="pro1" type="num" class="quantity__count" value="0" />
    <div data-id="1" class="quantity__increment">+</div>
  </div>
</div>

Answer 5

您可以使用一个函数执行此操作并传递clicked元素并将类型更改为参数。然后在基于更改参数的函数内部添加或减去count值。

＆＃13;

ChangeCount = function(el, change) {
  var count = el.siblings(".quantity__count").val();
  change == "add" ? count++ : count--;
  if (count < 0) count = 0;
  if (count > 99) count = 99
  el.siblings(".quantity__count").val(count);
}

$('.quantity > div').click(function() {
  const change = $(this).hasClass('quantity__decrement') ? 'sub' : 'add';
  ChangeCount($(this), change)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="o-grid o-grid--no-gutter">
  <div class="quantity o-grid__cell">
    <div class="quantity__decrement">-</div>
    <input type="num" class="quantity__count" value="0">
    <div class="quantity__increment">+</div>
  </div>
</div>

<div class="o-grid o-grid--no-gutter">
  <div class="quantity o-grid__cell">
    <div class="quantity__decrement">-</div>
    <input type="num" class="quantity__count" value="0">
    <div class="quantity__increment">+</div>
  </div>
</div>

＆＃13;

jQuery Count，单独计算

5 个答案: