JQuery:筛选列表元素

JQuery: Filter listelements

本文关键字：列表元素 筛选 JQuery      更新时间：2023-09-26

我有一个无序的元素列表，希望过滤掉（切换）所有类为"alt"的元素，但不过滤掉那些有第二类"links"的元素。

HTML:

Toggle: 
<a href="#" id="linkToggle">Links</a>
<a href="#" id="altToggle">ALT</a>
<ul id="errorList" class="nav nav-list" style="height: 190px; overflow: auto;">
    <li class="alt">Alt 1</li>
    <li class="alt">Alt 2</li>
    <li class="alt links">Alt / Links 1</li>
    <li class="alt links">Alt / Links 2</li>
    <li class="links">Links 1</li>
    <li class="links">Links 2</li>
</ul>

jQuery：

function toggleClass(cssClass) {
    $("."+cssClass).toggle();
    $("#"+cssClass+'Count').parent().toggleClass("muted");
}

$("#linkToggle").click(function() { 
    $(".links").toggle();  
    $(this).toggleClass("muted");
})
$("#altToggle").click(function() { 
    $(".alt").toggle();    
    $(this).toggleClass("muted");
})

我为你做了一个JSFiddle：http://jsfiddle.net/7MnXd/

这里有6个元素：

  • 2有一个名为"链接"的类
  • 另外两个有一个叫"alt"的课
  • 并且有一个元素同时具有这两个类

我想归档的内容：

当点击"链接"时，仅"链接1"&"链接2"应该被过滤掉，因为"Alt+Links n"同时具有这两个类。只有当两个开关都被激活时，这两个元素才应该被过滤掉。我还尝试了jQuery提供的[filter（）函数][2]，但无法解决问题。我想我必须检查它是否是唯一的类，如果不是，它不会被过滤掉，但如何检查其他类是否已经切换？

有人能给我指正确的方向吗？谢谢

如果它符合您的需求，请尝试：

演示

$("#linkToggle").click(function() { 
    $(".links").toggle();  //.not('.alt') ???
    $(this).toggleClass("muted");
})
$("#altToggle").click(function() { 
    $(".alt").not('.links').toggle();    
    $(this).toggleClass("muted");
})

这应该有效：

function toggleClass(cssClass) {
    $("."+cssClass).toggle();
    $("#"+cssClass+'Count').parent().toggleClass("muted");
}

$("#linkToggle").click(function() { 
    $(".links:not(.alt)").toggle();  
    $(this).toggleClass("muted");
})
$("#altToggle").click(function() { 
    $(".alt:not(.links)").toggle();    
    $(this).toggleClass("muted");
})

这应该是你想要的，这将检查是否存在一个类和一个类。

$("#linkToggle").click(function() { 
    $("li[class='links']").toggle();  
    $(this).toggleClass("muted");
});
$("#altToggle").click(function() { 
    $("li[class='alt']").toggle();    
    $(this).toggleClass("muted");
});

好的，经过一些测试，我得到了以下解决方案，在其他情况下也可以使用：

HTML

Toggle: 
<span class="nav-switches">
    <a href="javascript:toggleClass('links');" data-toggle="">Link (<span id="linksCount">0</span>)</a>
    <a href="javascript:toggleClass('alt');" data-toggle="">Text (<span id="altCount">0</span>)</a>
    <a href="javascript:toggleClass('csv');" data-toggle="">CSV (<span id="csvCount">0</span>)</a>
</span>
<ul id="errorList" class="nav nav-list" style="height: 190px; overflow: auto;">
    <li class="alt">Alt 1</li>
    <li class="alt">Alt 2</li>
    <li class="alt links">Alt / Links 1</li>
    <li class="alt links">Alt / Links 2</li>
    <li class="links">Links 1</li>
    <li class="links">Links 2</li>
    <li class="csv">CSV 1</li>
    <li class="csv">CSV 2</li>
    <li class="csv">CSV 3</li>
</ul>

JavaScript

window.toggleClass = function(cssClass) {
    // Wird bereits gefiltert und auf aktivierten Filter geklickt?
    if( $("#"+cssClass+'Count').parent().siblings().hasClass("muted") && !$("#"+cssClass+'Count').parent().hasClass("muted") ) {
        $("ul#errorList li").show();
        $("#"+cssClass+'Count').parent().siblings().removeClass("muted");
    } else {
        $("ul#errorList li").hide();
        $("ul#errorList").find("li."+cssClass).show();
        $("#"+cssClass+'Count').parent().siblings().addClass("muted");
        $("#"+cssClass+'Count').parent().removeClass("muted");
    }
}

在JSFiddle上查看演示

我希望你和我一样喜欢这个解决方案！

相关文章：