1

Народ подскажите как можно настроить данный счетчик для каждого div'a, когда нажимаю на плюс или минус значение меняется и в других блоках. Как можно сделать чтобы count менялся только в одном div'e? пробовал с parent(), siblings() не получается корректно настроить подсчет.

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

3 ответа 3

2

У тебя $('._count') найдёт все классы на странице и суммирует их тоже все.
Нужно к примеру унифицировать каждый блок.

Или один из вариантов:
Добавил родительский блок <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);
});
0

Подразбейте на блоки, читабельнее код, и логичнее структура.

$('._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>

2
  • я таким же методом делал через $('._count', $(this).parent()).html(+$('._count').html() + 1); и значение так же не может быть больше пред. или след. блока, потестите свой код, увидите.
    – daydreams
    12 окт 2016 в 17:27
  • то есть нельзя сделать так, что бы в одном было 10, в другом 30, у них всегда значения равны
    – daydreams
    12 окт 2016 в 17:28
0

Нужно заменить $('._count') и во втором случае

   $(this).closest('.block').find('._count').html(+$(this).closest('.block').find('._count').html() + 1);


   $(this).closest('.block').find('._count').html(+$(this).closest('.block').find('._count').html() - 1);

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.