Mootools 选择过滤答案

【问题标题】：Mootools Select filteringMootools 选择过滤
【发布时间】：2013-03-13 17:12:04
【问题描述】：

当我单击 <select> 中的一个选项时，我想显示特定的 <li> 元素：

<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 中。谢谢！

【问题讨论】：

each for ul li 的 if 语句检查何时开始直到下一个 .group-result，与最后一部分有问题。不太熟悉 mootools

标签： javascript filter mootools

【解决方案1】：

您只需要一个状态变量来跟踪您在迭代li 元素时是否在所选组中。假设您通过添加 active-result 类来显示 li 元素，如下所示应该可以工作：

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');
        }
    });
});

【讨论】：