Как сбросить переключатель в jQuery?

Question

Структура меню, которую я здесь, приведен ниже. Необходимыми требованиями являются:

Каждый li должен быть переключателем, в котором он может быть выбран и отменен для элементов 1-4. Несколько литий можно выбрать между диапазоном 1-4. Таким образом, пользователь может выбрать Item 1 & Пункт 3, и их фон будет выделен. При наведении курсора на любой из элементов и элементов выбора «Все» li должно быть изменение фокуса mouseOver/mouseOut. Если элемент выбран, тогда не должно быть состояния зависания mouseOver/mouseOut.

И наконец, если выбрано «Все» li, остальные элементы (если выбрано) должны полностью сбросить состояния переключения и снять выделение. Затем, если после этого выбирается другой элемент, выбор «Все» также должен быть сброшен.

Вот что у меня есть до сих пор, и у меня состояние зависания отлично работает для всех компонентов. Я не знаю, как написать операцию разблокировки для сброса всех элементов 1-4, когда выбрано «Все», поэтому «состояние» элементов 1-4 сбрасывается, а затем также сброс для «Все», если он выбран, а затем после этого выбирается элемент 1-4.

Извините, что являюсь многословным, но я хочу попытаться объяснить его как можно лучше, чтобы не было путаницы. :)

//css 
.liselected{ 
background-color:#256ca0; 
} 

.lihoveron{ 
background-color:#eceef5; 
} 




$(document).ready(function() { 

var startToggle = function(){ 
$('li[id|=nav]').toggle(
    function() { 
     $(this).addClass('liselected').children().css('color','#ffffff'); 
     $(this).removeClass('lihoveron'); 
    }, 
    function() { 
     $(this).removeClass('liselected').children().css('color','#5D788B'); 
    }).mouseover(function() { 
     $(this).css('cursor','pointer'); 
    }).hover(function() { 
     if ($(this).hasClass('liselected')){ 
     } 
     else{ 
      $(this).addClass('lihoveron'); 
     } 
    }, function() { 
    $(this).removeClass('lihoveron'); 
}); 
}; 

startToggle(); 

}); 



<ul> 
<li id="nav-all"> 
    <a class="item" href=""> 
     All Items 
    </a> 
</li> 
<li id="nav-item1"> 
    <a class="item" href=""> 
     Item 1 
    </a> 
</li> 
<li id="nav-item2"> 
    <a class="item" href=""> 
     Item 2 
    </a> 
</li> 
<li id="nav-item3"> 
    <a class="item" href=""> 
     Item 3 
    </a> 
</li> 
<li id="nav-item4"> 
    <a class="item" href=""> 
     Item 4 
    </a> 
</li> 
<li id="nav-item5"> 
    <a class="item" href=""> 
     Item 5 
    </a> 
</li> 

Answer 1

Я хотел бы сделать это что-то вроде этого:

1. у вас есть массив с индексами выбранных элементов, т.е. [2,23,5,1].
2. Когда выбран новый элемент, функция должна проверить, имеет ли массив максимально допустимые элементы. т. е. 4, если это так, удалите первый элемент и добавьте новый щелчок.
3. тогда вы должны снять все элементы и сделать выбор элементов в массиве.

в первый раз у вас есть пустой массив: [] на первом выбранном элементе [2] на втором [2,23] и так далее.

, когда элементы 4 [2,23,5,1], и вы нажали, например, на 7-й элемент, тогда вы удаляете 2 из массива и добавляете 7 в конце. это будет выглядеть следующим образом: [23,5,1,7]

тогда вы делаете:

$('li.elementsClass').removeClass('liselected') 

, а затем цикл массива и добавить класс liselected каждого элемента в массиве.

HTH