使用 jQuery-EasyFilter 過濾“多類別”

Question

我嘗試修改jQuery EasyFilter ：目前，每個項目都有一個由項目的data-easyitem傳遞的唯一類別。 我想為一個項目分配多個類別。 為了演示，請看一下這支筆。

項目 4 被分配到類別 1 和類別 4： data-easyitem="cat1,cat4" 。 因此，當我激活Category 1以及單擊Category 4時，它應該會顯示出來。

我想我需要.split項目傳遞的data-easyitem並將其與類別值進行比較。

這可能是合適的地方嗎？

$(this.wrap)
    .find("[data-easyitem]")
    .each(function() {
        var item = $(this);

        // Compare if the ['data-easyfilter'] is diferent from *
        if (value !== "*") {
            if (item.attr("data-easyitem") == value) {
                showItems.push(item[0]);
            } else {
                hiddeItems.push(item[0]);
            }
        } else {
            showItems.push(item[0]);
        }
    });

不幸的是，我真的不知道如何。 我將不勝感激任何提示和提示。

Answer 1

您首先需要獲取attr("data-easyitem")值並將它們split 。然后使用for-loop循環遍歷拆分后得到的值，最后將這些values與根據此顯示或隱藏項目選擇的類別進行比較。

演示代碼：

 (function($, window, document, undefined) { "use strict"; // Default options var defaults = { firstFilter: "*", animation: "slide", duration: 400 }; // The plugin constructor function EasyFilter(element, options) { // Merge user settings with default, recursively this.options = $.extend(true, {}, defaults, options); // Wrap container element this.wrap = $(element); // Call initial method this.init(); } $.extend(EasyFilter.prototype, { init: function() { var object = this; this._addEvents(); this.filter(object.options.firstFilter); }, filter: function(value) { console.clear() var object = this; var showItems = []; var hiddeItems = []; $(this.wrap) .find("[data-easyitem]") .each(function() { var item = $(this); if (value !== "*") { //get attr value and split between `,` var items_ = item.attr("data-easyitem").split(","); //loop through the splits values for (var i = 0; i < items_.length; i++) { //check if the value ie : `(data-easyfilter)` is == to split value if (items_[i] == value) { showItems.push(item[0]); //show them } else { hiddeItems.push(item[0]); //hide } } } else { showItems.push(item[0]); } }); object._toggleItems(hiddeItems, showItems); }, _slideItemsEffect: function(value, showItems) { var object = this; $(value).slideUp(object.options.duration, function() { setTimeout(function() { $.each(showItems, function(index, value) { $(value).slideDown(object.options.duration, function() {}); }); }, 300); }); }, _fadeItemsEffect: function(value, showItems) { var object = this; $(value).fadeOut(object.options.duration, function() { setTimeout(function() { $.each(showItems, function(index, value) { $(value).fadeIn(object.options.duration, function() {}); }); }, 300); }); }, _toggleItems: function(hiddeItems, showItems) { var object = this; // Compare if there is more than one item to hide if (hiddeItems.length > 0) { // Hide and show item from arrays $.each(hiddeItems, function(index, value) { switch (object.options.animation) { case "slide": object._slideItemsEffect(value, showItems); break; case "fade": object._fadeItemsEffect(value, showItems); break; default: object._slideItemsEffect(value, showItems); } }); } else { //Show all items $.each(showItems, function(index, value) { switch (object.options.animation) { case "slide": $(value).slideDown(object.options.duration, function() {}); break; case "fade": $(value).fadeIn(object.options.duration, function() {}); break; default: $(value).slideDown(object.options.duration, function() {}); } }); } }, _addEvents: function() { var object = this; // Click $(this.wrap) .find("[data-easyfilter]") .click(function() { object.filter($(this).attr("data-easyfilter")); }); } }); // Easy Filter Wraper $.fn.easyFilter = function(options) { this.each(function() { new EasyFilter(this, options); }); }; })(jQuery, window, document); $('#easy-filter-wrap').easyFilter();

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.5.2/materia/bootstrap.min.css"> <div id="jquery-script-menu"> <div class="container"> <div id="easy-filter-wrap"> <div class="btn-group btn-group-toggle mb-3" data-toggle="buttons"> <label class="btn btn-primary active" data-easyfilter="*"> <input type="radio" name="options" id="option0" checked> All </label> <label class="btn btn-primary" data-easyfilter="cat1"> <input type="radio" name="options" id="option1"> Category 01 </label> <label class="btn btn-primary" data-easyfilter="cat2"> <input type="radio" name="options" id="option2"> Category 02 </label> <label class="btn btn-primary" data-easyfilter="cat3"> <input type="radio" name="options" id="option3"> Category 03 </label> <label class="btn btn-primary" data-easyfilter="cat4"> <input type="radio" name="options" id="option4"> Category 04 </label> </div> <br /><br /> <!--put both value here as well--> <div data-easyitem="cat1,cat4" class="alert alert-danger"> Item 01 (Category 1) </div> <div data-easyitem="cat2" class="alert alert-danger"> Item 02 (Category 2) </div> <div data-easyitem="cat3" class="alert alert-danger"> Item 03 (Category 3) </div> <div data-easyitem="cat1,cat4" class="alert alert-danger"> Item 04 (Category 4) </div> </div> </div> </div>