如何重置jQuery切換？

我的菜單結構如下。必要的要求是：如何重置jQuery切換？

每個李必須是一個切換，它可以選擇和取消選擇項目1-4。可以在1-4的範圍內選擇多個li。因此，用戶可以選擇項目1 &項目3，並且它們的背景都將被突出顯示。將鼠標懸停在任何項目和「All」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>

來源

2010-10-26 ninu

我認爲標題解釋了一切。我很想知道我自己:) – 2010-10-26 14:40:39

鑑於Nik的建議從下面我想出來。我會很快發佈我的解決方案。 :) – ninu 2010-10-29 13:47:28

我會做這樣的事情：

你有選擇的元素即[2,23,5,1]的索引。
當選擇新元素時，函數需要檢查數組是否具有最大允許元素。如果是4，則刪除第一個元素並添加新的點擊。
然後您必須取消選擇所有元素並選擇數組中的元素。

在第一時間

你必須空數組：[] 第一個選擇的元素[2] 上的第二[2,23] 等。

當元素爲4 [2,23,5,1]，並且您在第7個元素上單擊時，則從數組中刪除2，最後添加7。它看起來像：[23,5,1,7]

那麼你做：

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

，然後循環數組，並添加liselected陣列中的每個元素的類。

HTH

來源

2010-10-26 14:50:47

如何重置jQuery切換？

回答

相關問題