使用复选框和list.js应用多个过滤器 [英] Apply multiple filters using checkboxes and list.js

问题描述

我试图根据一组复选框来筛选一些结果，使用list.js插件。

我现在已经设法按一个标准排序，一次只排序一个项目，即只是简单，只适度，但是当我尝试并选择多个复选框的目前它不工作即。同时选择简单和中等。

有没有人有任何建议，我可以做到这一点。

   < div id =search-results> 
排序：
< button class =sort btndata-sort =name> 
名称< i class =fa fa-fw>< / i> 
< / button> 
< button class =sort btndata-sort =date> 
离开< i class =fa fa-fw>< / i> 
< / button> 
< button class =sort btndata-sort =difficulty> 
难度< i class =fa fa-fw>< / i> 
< / button> 
 
过滤器：
< label for =easy>简单< / label> 
< input type =checkboxname =easyclass =filterdata-value =Easy/> 
< label for =moderate>中等< / label> 
< input type =checkboxname =moderateclass =filterdata-value =Moderate/> 
< label for =挑战>挑战< / label> 
< input type =checkboxname =challengingclass =filterdata-value =Challenging/> 
 
 
< div class =list> 
 $ b @foreach（var page in umbracoPages.OrderBy（x => x.Difficulty））
 {
< div class =package> 
< span class =name> @ page.Name< / span>< br /> 
< span class =date>< strong> @ page.Date @（page.Date == 1？departure：departures）available< / strong>< / span>< ; br /> 
< span class =困难> @ page.Difficulty< / span> 
< / div> 
} 
 
< / div> 
< / div> 
  

Javascript：

 < code $> $（$ {
 $（＃dateFrom，#dateTo）。datepicker（{
 dateFormat：dd.mm.yy，
 constrainInput：true ，
 changeMonth：true，
 changeYear：true，
 minDate：0 
}）; 
 
 var options = {
 valueNames：[ 'name'，'date'，'difficulty'] 
}; 
 
 var userList = new List（'search-results'，options）; 
 
 
 $ filter $ b $（'。filter'）。change（function（）{
 var bool = this.checked; 
 var value = $（this）.data（值）; 
 
 userList.filter（函数（item）{
 if（item.values（）。== == $ value&& bool == true）{
返回true; 
} else if（userList.filtered&& bool == false）{
 return true; 
} else {
 return false; 
} 
 
 
}）; 
 
返回false; 
 
}）; }）; 
  

解决方案

  $（function（）{
 var options = {
 valueNames：[$ 'name'，'date'，'difficulty'] 
}; 
 
 var userList = new List（'search-results'，options）; 
 var activeFilters = [] ; 
 $ b $ // sort 
 userList.on（updated，function（）{
 $（'。sort'）。each（function（）{
 if（$（this）.hasClass（asc））{
 $（this）.find（。fa）。addClass（fa-sort-asc）。removeClass（fa-sort- （desc）。show（）; 
} else if（$（this）.hasClass（desc））{
 $（this）.find（。fa）.addClass（fa （）.sort-desc）。removeClass（fa-sort-asc）。show（）; 
} else {
 $（this）.find（。fa）。 
 
 
 
 $ b $ filter $ b $（'。filter'）。change（function（）{
 var isChecked = this.checked; 
 var value = $（this） .data（value）; 
 
 if（isChecked）{
 //添加到活动过滤器列表
 activeFilters.push（value）; 
} 
 else 
 {
 //从有效过滤器中移除
 activeFilters.splice（activeFilters.indexOf（value），1）; 
 
 $ b userList.filter（function（item）{
 if（activeFilters.length> 0）
 {
 return（activeFilters.indexOf（ item.values（）。difficulty））> -1; 
} 
返回true; 
}）; 
}）; 
 
}）; 
  

http://codepen.io/anon/pen/QbOYaG

I am trying to filter some results based on a group of check box's, using list.js plugin.

I have managed to sort by one criteria at the moment, which only sorts by one item at a time i.e. only easy, only moderate, but when I try and select multiple checkbox's at the moment it doesn't work ie. selecting both easy and moderate at the same time.

Does anyone have any advice how I can do this. The html and javascript are below.

Thanks in advance.

<div id="search-results">
    Sort by: 
    <button class="sort btn" data-sort="name">
        Name <i class="fa fa-fw"></i>
    </button>
    <button class="sort btn" data-sort="date">
       Departures <i class="fa fa-fw"></i>
    </button>
    <button class="sort btn" data-sort="difficulty">
       Difficulty <i class="fa fa-fw"></i>
    </button>

    Filter:
    <label for="easy">Easy</label>
    <input type="checkbox" name="easy" class="filter" data-value="Easy" />
    <label for="moderate">Moderate</label>
    <input type="checkbox" name="moderate" class="filter" data-value="Moderate" />
    <label for="challenging">Challenging</label>
    <input type="checkbox" name="challenging" class="filter" data-value="Challenging" />


    <div class="list">

        @foreach (var page in umbracoPages.OrderBy(x => x.Difficulty))
        {
            <div class="package">
                <span class="name">@page.Name</span><br />
                <span class="date"><strong>@page.Date @(page.Date == 1 ? "departure" : "departures") available</strong></span><br />
                <span class="difficulty">@page.Difficulty</span>
            </div>
        }

    </div>
</div>

Javascript:

$(function () {
    $("#dateFrom, #dateTo").datepicker({
        dateFormat: "dd.mm.yy",
        constrainInput: true,
        changeMonth: true,
        changeYear: true,
        minDate: 0
    });

    var options = {
        valueNames: ['name', 'date', 'difficulty' ]
    };

    var userList = new List('search-results', options);


    //filter
    $('.filter').change(function() {
        var bool = this.checked;
        var value = $(this).data("value");

        userList.filter(function (item) {
            if (item.values().difficulty == value && bool == true) {
                return true;
            } else if (userList.filtered && bool == false) {
                return true;
            } else {
                return false;
            }


        });

        return false;

     }); });

解决方案

You need to store active filters in an array and check against all of them.

$(function() {
var options = {
    valueNames: ['name', 'date', 'difficulty' ]
};

var userList = new List('search-results', options);
var activeFilters = [];

//sort
userList.on("updated", function () {
    $('.sort').each(function () {
        if ($(this).hasClass("asc")) {
            $(this).find(".fa").addClass("fa-sort-asc").removeClass("fa-sort-desc").show();
        } else if ($(this).hasClass("desc")) {
            $(this).find(".fa").addClass("fa-sort-desc").removeClass("fa-sort-asc").show();
        } else {
            $(this).find(".fa").hide();
        }
    })
})

//filter
$('.filter').change(function() {
    var isChecked = this.checked;
    var value = $(this).data("value");

    if(isChecked){
        //  add to list of active filters
        activeFilters.push(value);
    }
    else
    {
        // remove from active filters
        activeFilters.splice(activeFilters.indexOf(value), 1);
    }

    userList.filter(function (item) {
        if(activeFilters.length > 0)
        {
            return(activeFilters.indexOf(item.values().difficulty)) > -1;
        }
        return true;
    });
 });

});

http://codepen.io/anon/pen/QbOYaG

这篇关于使用复选框和list.js应用多个过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！