People tell me how you can configure this counter for each div, when I click on the plus or minus value changes in other blocks. How can I make count change in only one div? tried with parent (), siblings () fails to properly configure the count.

<div class="_minus"> <span>-</span> </div> <div class="_count">5</div> <div class="_plus"> <span>+</span> </div> $('._plus').click(function(){ $('._count').html(+$('._count').html() + 1); }); $('._minus').click(function(){ $('._count').html(+$('._count').html() - 1); });

    2 answers 2

    Your $('._count') will find all the classes on the page and summarizes them all, too.
    It is necessary, for example, to unify each block.

    Or one of the options:
    Added parent <div class="_item">

     <div class="_item"> <div class="_minus"> <span>-</span> </div> <div class="_count">5</div> <div class="_plus"> <span>+</span> </div> </div> $('._plus').click(function(){ var $count = $(this).parent().find('._count'); $count.text(+$count.text() + 1); });

      Subdivide into blocks, readable code, and more logical structure.

       $('._plus').click(function() { $(this).closest('.block').find('._count').html(+$('._count').html() + 1); }); $('._minus').click(function() { $(this).closest('.block').find('._count').html(+$('._count').html() - 1); }); 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="block"> <div class="_minus"> <span>-</span> </div> <div class="_count">5</div> <div class="_plus"> <span>+</span> </div> </div> <div class="block"> <div class="_minus"> <span>-</span> </div> <div class="_count">5</div> <div class="_plus"> <span>+</span> </div> </div>

      • I did the same method through $ ('._ count', $ (this) .parent ()). html (+ $ ('._ count'). html () + 1); and the value cannot be greater than the pre. or next block, test your code, see. - daydreams
      • that is, it is impossible to make it so that there would be 10 in one, 30 in the other, they always have equal values - daydreams