问题描述:

I have this fiddle and I want to know how I can implement filtering function based on two categories. when someone click the filter, it should get the values from both the current filters selection, hide the list and show only the filter result. Any idea on how to implement this step? any help would be appreciated!!

<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");

}

})

fiddle: http://jsfiddle.net/BlacBunny/5tfcuy1w/

网友答案:

Use this code

$("#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");
    });

I have not optimized this code. You are using dom ready function two times which is actually not required.

You can see the fiddle here

网友答案:

See Fiddle

This function will be called every time the filters are modified. The values of filter1 and filter2 must be modified per click to the filter buttons.

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);
        }
    });
}
网友答案:

Fiddle

$("#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");
    });
});
网友答案:

Try the contains selector

$('#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/

相关阅读:
Top