如何在 jQuery 中重置切换？

Question

我的菜单结构如下所示。必要的要求是：

每个 li 必须是一个切换开关，可以选择和取消选择第 1-4 项。可以在1-4的范围内选择多个li。因此用户可以选择第 1 项和第 3 项。第 3 项及其背景都会突出显示。将鼠标悬停在任何项目和“所有”选项上时，应该有 mouseOver/mouseOut 背景更改。如果选择了某个 Item，则不应出现 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 。

华泰