Переход между элементами с пропуском если есть class (hide)

31 января 2022, 06:30

Здравствуйте помогите пожалуйста. Как сделать так что бы если в элементе li существует class hide тогда этот элемент пропустить и перейти к другому.

// Функция вызывается при нажатие на любую клавишу клавиотуры 
window.document.onkeydown = function(e) { 
	// Переменная которая содержит активный элемент 
    var input = document.querySelector('.menu').querySelector("li.active"); 
    // Кнопка которая жаната 
    var key = event.keyCode; 
 
    // Принудительно обновляем boolean - true 
    var needFocusElement = true; 
 
    // Оператор try обробатывает условие и выберает тот вариант который заложин 
    try { 
		switch (key) { 
		    case 38: // стрелка вверх 
		        needFocusElement = input.previousElementSibling; 
		        break; 
		    case 40: // стрелка вниз 
		        needFocusElement = input.nextElementSibling; 
		        break; 
		    default: 
		    	// если не нашло кнопку присваеваем boolean - false 
		        needFocusElement = false; 
		} 
    } catch (e) {needFocusElement = false;} 
 
    // Если переменая == false заканчиваем функцию 
    if (!needFocusElement) return; 
 
    // Удаляем старый class 
    input.classList.remove('active'); 
 
    // Создаем новый class элементу 
    needFocusElement.classList.add('active'); 
}

.active { 
	background-color: blue; 
}

<ul class="menu"> 
	<li class="active">DarkWeb</li> 
	<li>DarkWeb</li> 
	<li>DarkWeb</li> 
	<li class="hide">Hide - DarkWeb</li> 
	<li>DarkWeb</li> 
	<li>DarkWeb</li> 
	<li>DarkWeb</li> 
	<li>DarkWeb</li> 
	<li>DarkWeb</li> 
	<li>DarkWeb</li> 
</ul>

Answer 1

Организовываете цикл с условием needFocusElement && needFocusElement.classList.contains('hide')

// Функция вызывается при нажатие на любую клавишу клавиатуры 
window.document.onkeydown = function(e) { 
  // Переменная которая содержит активный элемент 
  var input = document.querySelector('.menu').querySelector("li.active"); 
  var needFocusElement = input; 
  // Кнопка которая нажата 
  var key = event.keyCode; 
 
  do { 
    switch (key) { 
      case 38: // стрелка вверх 
        needFocusElement = needFocusElement.previousElementSibling; 
        break; 
      case 40: // стрелка вниз 
        needFocusElement = needFocusElement.nextElementSibling; 
        break; 
      default: 
        // если не нашло кнопку присваиваем null 
        needFocusElement = null; 
    } 
  // Выполняем цикл пока находится элемент и он содержит класс hide 
  } while (needFocusElement && needFocusElement.classList.contains('hide')) 
 
  // Если переменная == null заканчиваем функцию 
  if (!needFocusElement) return; 
 
  // Удаляем старый class 
  input.classList.remove('active'); 
 
  // Создаем новый class элементу 
  needFocusElement.classList.add('active'); 
}

.active { 
  background-color: blue; 
}

<ul class="menu"> 
  <li class="active">DarkWeb</li> 
  <li>DarkWeb</li> 
  <li>DarkWeb</li> 
  <li class="hide">Hide - DarkWeb</li> 
  <li>DarkWeb</li> 
  <li>DarkWeb</li> 
  <li>DarkWeb</li> 
  <li>DarkWeb</li> 
  <li>DarkWeb</li> 
  <li>DarkWeb</li> 
</ul>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

помогите понять, как исправить ошибку Error in v-on handler: "TypeError: commentsListWidth is not a function"

мне просто нужно установить ширину списка, но появляется ошибка Error in v-on handler: "TypeError: commentsListWidth is not a function" как ее исправить?

101

HTML