-2

我有一个无序列表的元素，想要过滤掉（切换）所有具有“alt”类的元素，但不是那些具有第二类“链接”的元素。

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 有一个名为“链接”的类
  • 另外2个有一个名为“alt”的类
  • 并且有两个类的元素

我要归档的内容：

当点击“Link”时，只有“Link 1”和“Link 2”应该被过滤掉，因为“Alt / Links n”有两个类。仅当两个切换都被激活时，才应过滤掉这两个元素。我还尝试了 jQuery 提供的 [filter() function][2]，但无法解决问题。我想我必须检查它是否是唯一的类，如果不是，它不会被过滤掉，但是如何检查另一个类是否已经切换？

有人可以指出我正确的方向吗？谢谢！

4

4 回答 4

0

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

演示

$("#linkToggle").click(function() { 
    $(".links").toggle();  //.not('.alt') ???
    $(this).toggleClass("muted");
})
$("#altToggle").click(function() { 
    $(".alt").not('.links').toggle();    
    $(this).toggleClass("muted");
})
于 2013-07-01T12:23:09.913 回答
0

这应该有效：

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");
})
于 2013-07-01T12:26:40.797 回答
0

这应该做你所追求的，这将检查一堂课和一堂课是否存在。

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

$("#altToggle").click(function() { 
    $("li[class='alt']").toggle();    
    $(this).toggleClass("muted");
});
于 2013-07-01T12:27:59.330 回答
-2

好的，经过一些测试，我得出了以下解决方案，该解决方案也可能适用于其他情况：

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 上查看演示

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

于 2013-07-08T12:39:42.167 回答