jQuery Count, count individually

Question

I have counters in my cart and I'm struggling to get the controls to only target the specific counter I'm on. Instead, it's updating them all.

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

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

I've tried using .closest, .siblings etc; I'm a bit stumped and I know this isn't a tricky thing to do.

Any help is appreciated!

Ele · Accepted Answer · 2018-03-07 11:57:55Z

You can use the function siblings to select the quantity__count field and bind that element as the this context to provide a cleaner approach.

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

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

Andrei Rosu · Accepted Answer · 2018-03-07 12:00:00Z

I would bind the click event on each item:

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

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

You can also implement it, using the e.target, like this:

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

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

Nenad Vracar · Accepted Answer · 2018-03-07 11:51:31Z

You could do this with one function and pass clicked element and change type as parameters. Then inside that function based on change parameter you add or subtract from count value.

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

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

Vivek Athalye · Accepted Answer · 2018-03-07 11:48:34Z

1

If your HTML is not going to change, you can simply use .next() and .prev() selectors.

To make it a bit more generic you could use $(this).parent().find('.quantity__count').

answered Mar 7, 2018 at 11:48

Vivek Athalye

2,9792 gold badges24 silver badges34 bronze badges

Comments

Ketan Vaghasiya · Accepted Answer · 2018-03-07 11:50:45Z

Some basic use of data attibute would solve your problem.

// 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>

Collectives™ on Stack Overflow

jQuery Count, count individually

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related