Как добавлять класс к элементу, начиная с конца по 3 класса за один клик?

Question

[William]

демо скрипка: https://jsfiddle.net/7xwncjug/1/

написал скрип, по логике: открывается часть контента поэтапно - работает, но поэтапно закрыть не получается, закрывается всё...

<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li class="item hidden">item 4</li>
<li class="item hidden">item 5</li>
<li class="item hidden">item 6</li>
<li class="item hidden">item 7</li>
<li class="item hidden">item 8</li>
<li class="item hidden">item 9</li>
<li class="item hidden">item 10</li>
<li class="item hidden">item 11</li>
</ul>

<div id="btn">раскрыть</div>

<div id="btn2" class="hidden">закрыть</div>

.hidden{
  display:none;
}

$(function () {
  $('#btn').click(function(evt) {
    evt.stopPropagation(); //stops the document click action
    $('ul li.item.hidden').slice(0,3).removeClass('hidden').addClass('opened');

    if (!$('li.item').hasClass('hidden')) {
      $('#btn').addClass('hidden');
    } 

    if ($('li.item').hasClass('opened')) {
      $('#btn2').removeClass('hidden');
    } 
  });
});


$(function () {
	$('#btn2').click(function() {
	    $('ul li.item').addClass('hidden').removeClass('opened').prev().slice(-3);
          
      if ($('li.item').hasClass('hidden')) {
         $('#btn').removeClass('hidden');
      }  

      if ($('li.item').hasClass('hidden')) {
        $('#btn2').addClass('hidden');  
      }         
	}); 
});

Comments

[scottparker]

так а почему slice в проблемном месте применяется после добавления/удаления классов, а в нормальном перед?

[William]

решил задачу, добавив одно условия и ошибка в классах

https://jsfiddle.net/7xwncjug/3/

Answer 1

[Life_ha]

на квери уже забыл как проще описать, вот корявый вариант думаю суть поймете

$(function () {
	$('#btn2').click(function() {
  // ловим все открытые 
	    let opened_li = document.querySelectorAll('.opened');
  //проверяем, если не пустой то ловим последние 3 элемента 
      if (opened_li.length >= 3) {
      	  // считаем от конца 
        for (let i = (opened_li.length-1); i > opened_li.length-4; i--) {
  //убираем лишнее и добавляем нужное 
        	opened_li[i].classList.remove('opened');
                opened_li[i].classList.add('hidden');
        }
      	
      }
          
      if ($('li.item').hasClass('hidden')) {
         $('#btn').removeClass('hidden');
      }  

      if ($('li.item').hasClass('hidden')) {
        $('#btn2').addClass('hidden');  
      }         
	}); 
});