2013-03-13 66 views
0

我想顯示具體<li>元素時,我對其中的一個選項單擊從這樣一個<select>MooTools的選擇過濾

<select> 
    <option value="f_chzn_g_0">Group One</option> 
    <option value="f_chzn_g_4">Group Two</option> 
</select> 

這是我<li>的這會得到過濾,只顯示選定的組。

<ul> 
    <li id="f_chzn_g_0" class="group-result">Group One</li> 
    <li id="f_chzn_o_1" class="active-result group-option" style="">one</li> 
    <li id="f_chzn_o_2" class="active-result group-option" style="">two</li> 
    <li id="f_chzn_o_3" class="active-result group-option" style="">three</li> 
    <li id="f_chzn_g_4" class="group-result">Group Two</li> 
    <li id="f_chzn_o_5" class="active-result group-option" style="">one</li> 
    <li id="f_chzn_o_6" class="active-result group-option" style="">two</li> 
    <li id="f_chzn_o_7" class="active-result group-option" style="">three</li> 
</ul> 

有人可以幫我解決這個問題嗎?這一切都必須在Mootools中。謝謝!

+0

'each'用於UL李與if語句檢查時開始,直到明年。集團-結果,以及有troble與最後部分。不太熟悉mootools – Trouble 2013-03-13 17:50:40

回答

0

您只需要一個狀態變量,用於在迭代li元素時跟蹤您是否在選定組中。假設您展示通過添加active-resultli元素,像下面應該工作:

function showSelectedListItems(ulElem, selectedId) { 
    var inSelectedGroup = false; 

    ulElem.getElements('li').each(function(liElem) { 
     if (!inSelectedGroup) { 
      if (liElem.id == selectedId) inSelectedGroup = true; 
     } 
     else { 
      if (liElem.hasClass('group-result') inSelectedGroup = false; 
      else liElem.addClass('active-result'); 
     } 
    }); 
});