Добавить класс active

480

15 июня 2017, 07:53

Имеется опросник, где каждый блок вопроса имеет класс (.wp-polls). Внутри блока с вопросом есть кнопка с классом (.Buttons). Нужно, чтобы при нажатии на кнопку в первом блоке, у этого блока класс active убирался, а следующему блоку с классом .wp-polls присваивался. Блоков с вопросами может быть сколько угодно. Подскажите, каким образом можно это реализовать. Пробовал задавать массив

var mass = [];
$('.wp-polls').each(function(index) {
  mass.push($(this));
});

а потом цикл

for (var i = 0; i <= mass.lenght - 1; i++) {
  $('.Buttons').click(function(){
    if ($('.wp-polls').hasClass('active')) {
      $('.wp-polls').removeClass('active');
    } else {
      $('wp-polls').addClass('active');
    }
  });
};

но цикл выдает undefined

Answer 1

Просто при клике на кнопку ищите его родительский элемент с классом .wp-polls с помощью .closest(). После проверяйте, если он имеет .active, то удаляйте этот класс и добавляйте на следующий с помощью .next().

$('.button').click(function() { 
  let wpPolls = $(this).closest('.wp-polls'); 
  if (wpPolls.hasClass('active')) { 
    wpPolls.removeClass('active'); 
    wpPolls.next().addClass('active'); 
  } 
});

.wp-polls { 
  height: 40px; 
  background-color: black; 
} 
 
.active { 
  background-color: yellow; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wp-polls active"> 
  <button class="button">Next</button> 
</div> 
<div class="wp-polls"> 
  <button class="button">Next</button> 
</div> 
<div class="wp-polls"> 
  <button class="button">Next</button> 
</div> 
<div class="wp-polls"> 
  <button class="button">Next</button> 
</div> 
<div class="wp-polls"> 
  <button class="button">Next</button> 
</div> 
<div class="wp-polls"> 
  <button class="button">Next</button> 
</div>