使用javascript对< light >(s)列表应用多个过滤器类别

Apply multiple filter categories to a list of <li>(s) with javascript

本文关键字：应用 列表 过滤器 javascript light 使用      更新时间：2023-09-26

我有这个小提琴，我想知道如何实现基于两个类别的过滤功能。当有人单击过滤器时，它应该从当前过滤器选择中获取值，隐藏列表并仅显示过滤器结果。任何关于如何实现这一步的想法?任何帮助都会很感激!!

<ul style='list-style-type: none;' class="filter1">
<li><span class="filtercat1">red</span>
</li>
<li><span class="filtercat1">blue</span>
</li>
<li><span class="filtercat1">yellow</span>
</li>
<li><span class="filtercat1">all</span>
</li>
</ul> <span id="filterbutton1">
    <a href="#" id="prev">« Previous</a> 
    <a href="#" id="next">Next »</a>
</span>
<ul style='list-style-type: none;' class="filter2">
<li><span class="filtercat2">orange</span>
</li>
<li><span class="filtercat2">apple</span>
</li>
<li><span class="filtercat2">papaya</span>
</li>
<li><span class="filtercat2">all</span>
</li>
</ul> <span id="filterbutton2">
    <a href="#" id="prev2">« Previous</a>
    <a href="#" id="next2">Next »</a>
</span>
<ul id='list'>
<li class="">red orange</li>
<li class="">red apple</li>
<li class="">red papaya</li>
<li class="">blue orange</li>
<li class="">blue apple</li>
<li class="">blue papaya</li>
<li class="">yellow orange</li>
<li class="">yellow apple</li>
<li class="">yellow papaya</li>
</ul>
<span id="filterbutton">
    <a href="#" id="filter"> filter</a>
<span id="resetbutton">
    <a href="#" id="reset"> reset</a>


$(function () {
    var all = $('.filtercat1').addClass("passiv");
    var i = -1;
    $('#prev' ).click(function () {
        ctrlbutton(i = !i ? all.length - 1 : --i);
    });
    $('#next').click(function () {
        ctrlbutton(i = ++i % all.length);
    }).click();
    function ctrlbutton(ele) {
        all.removeClass("active").addClass("passiv");
        all.eq(ele).removeClass("passiv").addClass("active");
    }

})
$(function () {
    var all = $('.filtercat2').addClass("passiv");
    var i = -1;
    $('#prev2').click(function () {
        ctrlbutton(i = !i ? all.length - 1 : --i);
    });
    $('#next2').click(function () {
        ctrlbutton(i = ++i % all.length);
    }).click();
    function ctrlbutton(ele) {
        all.removeClass("active").addClass("passiv");
        all.eq(ele).removeClass("passiv").addClass("active");
    }

})

小提琴:http://jsfiddle.net/BlacBunny/5tfcuy1w/

使用此代码

$("#list").find("li").each(function(){
    this.className = "all "+this.innerHTML;
});
    $("#filter").click(function(){
        var class1 = $(".filter1").find(".active").text();
        var class2 = $(".filter2").find(".active").text();
        $("#list").find("li").addClass("passiv").end().find("."+class1+"."+class2)
        .removeClass("passiv").addClass("active");
    });
    $("#reset").click(function(){
        $("#list").find("li").addClass("active").removeClass("passiv");
    });

我没有优化这段代码。你使用了两次dom ready函数，这实际上是不必要的。

你可以看到这里的提琴

看到小提琴

这个函数将在每次修改过滤器时调用。每次点击过滤器按钮，必须修改filter1和filter2的值。

var filter1 = 'red'; // initial value of filter1
var filter2 = 'orange'; // initial value of filter2
function filterList() {
    var list = $('#list li');
    
    list.each(function(index, item) {
        var itemContents = $(item).text();
        
        if (itemContents.indexOf(filter1) >= 0 && itemContents.indexOf(filter2) >= 0) {
            $(item).show();
        } else {
            console.log('hide ' + itemContents);
        }
    });
}

小提琴

$("#filter").click(function() {
    var filterCat1 = $(".filter1 .active").text();
    var filterCat2 = $(".filter2 .active").text();

    $("#list li").each( function( index, element ){
        var text = $(element).text();
        if((text.indexOf(filterCat1) < 0 && filterCat1 != "all") 
           || (text.indexOf(filterCat2) < 0 && filterCat2 != "all"))
            $(element).removeClass("active").addClass("passiv");
        else
            $(element).removeClass("passiv").addClass("active");
    });
});

尝试包含选择器

$('#filter').click(function() {
    $("#list li").addClass("passiv");
    var filter1 = $(".filter1 span.active").text();
    var filter2 = $(".filter2 span.active").text();
    var filter= (filter1 == "all" ? "" : filter1) + " " + (filter2 == "all" ? "" : filter2);
    $('#list li:contains("' + filter + '")').removeClass("passiv");        
});
http://jsfiddle.net/5tfcuy1w/10/

相关文章：