7

list.js プラグインを使用して、チェック ボックスのグループに基づいていくつかの結果をフィルタリングしようとしています。

現時点では 1 つの基準で並べ替えることができました。これは一度に 1 つの項目でのみ並べ替えます。つまり、簡単で中程度の並べ替えのみですが、現時点で複数のチェックボックスを選択しようとすると機能しません。イージーとモデレートの両方を同時に選択します。

どうすればこれを行うことができるか、誰にもアドバイスがありますか。html と javascript は以下のとおりです。

前もって感謝します。

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

     }); });
4

1 に答える 1

9

アクティブなフィルターを配列に保存し、それらすべてに対してチェックする必要があります。

$(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

于 2015-06-25T12:23:35.597 に答える