Question

我已经从http://codepen.io/patrickkunka/pen/iwcap获取了代码并对其进行了修改，但我无法使其按预期工作。

如果我只选择1个过滤器，它可以正常工作 - 但是如果我开始比较我的过滤器，它就不会返回正确的结果。

我正在动态地返回“过滤器” - 但这应该不是问题。

任何人都可以对此提出一些看法吗？

js fiddle的链接：

// Loop through all div's with .mix class 
var genders = [];
var models = [];
var brands = [];
var prices = [];

$(".mix").each(function () {
    addToArrayIfNew(genders, $(this).attr('data-Gender'));
    addToArrayIfNew(models, $(this).data('model'));
    addToArrayIfNew(brands, $(this).data('brand'));
    if ($(this).data('brand').match(/\s/g)){
        $(this).addClass('Brand_' + $(this).data('brand'));
    }
    addToArrayIfNew(prices, $(this).data('price'));
    // Fix invalid css class names 


});

// Now return the arrays to HTML code 
if (models.length > 0) {
    var filterName = 'Model';
    var idName = 'ModelsFilter';
    $("#" + idName).append(RenderHTMLFilterBoxes(filterName, models));
}

if (genders.length > 0) {
    var filterName = 'Gender';
    var idName = 'GendersFilter';
    $("#" + idName).append(RenderHTMLFilterBoxes(filterName, genders));
}

if (brands.length > 0) {
    var filterName = 'Brand';
    var idName = 'BrandsFilter';
    $("#" + idName).append(RenderHTMLFilterBoxes(filterName, brands));
}

function RenderHTMLFilterBoxes(filterName, arraylist) {
    var htmlStr = "";
    for (var i in arraylist) {
        htmlStr = htmlStr + '<div class="filterBoxes"><div class="checkbox">';
        htmlStr = htmlStr + '<input type="checkbox" value=".' + filterName + '_' + arraylist[i].replace(/[^a-zA-Z]+/g,'') + '" />';
        htmlStr = htmlStr + '<label>' + arraylist[i] + '</label>';
        htmlStr = htmlStr + '</div></div>';
    }
    return htmlStr;
}

function addToArrayIfNew(arr, item) {
    if (item && jQuery.inArray(item, arr) == -1) {
        arr.push(item);
    }
}

function RenderHTMLPriceRange() {
    var lowest = Number.POSITIVE_INFINITY;
    var highest = Number.NEGATIVE_INFINITY;
    var tmp;
    for (var i = prices.length - 1; i >= 0; i--) {
        tmp = prices[i];
        if (tmp < lowest) lowest = tmp;
        if (tmp > highest) highest = tmp;
    }
    console.log(highest, lowest);
}


// MIX IT UP CODE

// To keep our code clean and modular, all custom functionality will be contained inside a single object literal called "checkboxFilter".

var checkboxFilter = {
    // Declare any variables we will need as properties of the object
    $filters: null,
    $reset: null,
    groups: [],
    outputArray: [],
    outputString: '',
    // The "init" method will run on document ready and cache any jQuery objects we will need.
    init: function () {
        var self = this; // As a best practice, in each method we will asign "this" to the variable "self" so that it remains scope-agnostic. We will use it to refer to the parent "checkboxFilter" object so that we can share methods and properties between all parts of the object.

        self.$filters = $('#Filters');
        self.$reset = $('#Reset');
        self.$container = $('#Container');

        self.$filters.find('.filterBoxes').each(function () {
            self.groups.push({
                $inputs: $(this).find('input'),
                active: [],
                tracker: false
            });
        });

       // console.log(self.groups);

        self.bindHandlers();
    },

    // The "bindHandlers" method will listen for whenever a form value changes. 

    bindHandlers: function () {
        var self = this;

        self.$filters.on('change', function () {
            self.parseFilters();
        });

        self.$reset.on('click', function (e) {
            e.preventDefault();
            self.$filters[0].reset();
            self.parseFilters();
        });
    },

    // The parseFilters method checks which filters are active in each group:

    parseFilters: function () {
        var self = this;

        // loop through each filter group and add active filters to arrays

        for (var i = 0, group; group = self.groups[i]; i++) {
            group.active = []; // reset arrays
            group.$inputs.each(function () {
                $(this).is(':checked') && group.active.push(this.value);
            });
            group.active.length && (group.tracker = 0);
        }

      //  console.log(self.groups);

        self.concatenate();
    },

    // The "concatenate" method will crawl through each group, concatenating filters as desired:

    concatenate: function () {
        var self = this,
            cache = '',
            crawled = false,
            checkTrackers = function () {
                console.log(1);
                var done = 0;

                for (var i = 0, group; group = self.groups[i]; i++) {
                    (group.tracker === false) && done++;
                }

                return (done < self.groups.length);
            },
            crawl = function () {
               // console.log(2);
                for (var i = 0, group; group = self.groups[i]; i++) {
                    group.active[group.tracker] && (cache += group.active[group.tracker]);

                    if (i === self.groups.length - 1) {
                        self.outputArray.push(cache);
                        cache = '';
                        updateTrackers();
                    }
                }
            },
            updateTrackers = function () {
                //console.log(3);
                for (var i = self.groups.length - 1; i > -1; i--) {
                    var group = self.groups[i];

                    if (group.active[group.tracker + 1]) {
                        group.tracker++;
                        break;
                    } else if (i > 0) {
                        group.tracker && (group.tracker = 0);
                    } else {
                        crawled = true;
                    }
                }
            };

        self.outputArray = []; // reset output array

        do {
            crawl();
        }
        while (!crawled && checkTrackers());

        self.outputString = self.outputArray.join();

        // If the output string is empty, show all rather than none:

        !self.outputString.length && (self.outputString = 'all');

        //console.log(self.outputString); 

        // ^ we can check the console here to take a look at the filter string that is produced

        // Send the output string to MixItUp via the 'filter' method:

        if (self.$container.mixItUp('isLoaded')) {
           // console.log(4);
            self.$container.mixItUp('filter', self.outputString);
          //  console.log(self.outputString);
        }
    }
};

// On document ready, initialise our code.

$(function () {
    // To avoid non javascript browsers not to see the content, the display:none will first be set
    // here, instead of the CSS file

    // Initialize checkboxFilter code

    checkboxFilter.init();

    // Instantiate MixItUp
     $(".mix").css("display", "none");
    $('#Container').mixItUp({
        load: {
            filter: 'none'
        },
        controls: {
            toggleLogic: 'or',
            toggleFilterButtons: true,
            enable: true // we won't be needing these
        },
        animation: {
            easing: 'cubic-bezier(0.86, 0, 0.07, 1)',
            duration: 600
        }
    });
});

HTML：

<div id="Filters">
    <div id="GendersFilter"></div>
    <div id="BrandsFilter"></div>
    <div id="ModelsFilter"></div>
</div>
<div id="Container">
    <div class="mix Brand_MystBrandname Model_ Gender_0" data-Gender="0" data-Brand="My 1st. Brand name!" data-Model="" data-Price="1000">My 1st. Brand name!</div>
    <div class="mix Brand_Casio Model_ Gender_0" data-Gender="0" data-Brand="Casio" data-Model="" data-Price="10">My casio block</div>
    <div class="mix Brand_Seiko Model_ Gender_2" data-Gender="2" data-Brand="Seiko" data-Model="Precision" data-Price="200">My seiko block</div>
    <div class="mix Brand_Nikon Model_Lada Gender_1" data-Gender="1" data-Brand="Nikon" data-Model="Lada" data-Price="40">My Nikon block</div>
    <div class="mix Brand_DELL Model_2 Gender_Inspirion" data-Gender="1" data-Brand="DELL" data-Model="Inspirion" data-Price="500">My Dell block</div>
</div>
<script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>

Answer 1

self.$filters.find('.filterBoxes').each(function () {
            self.groups.push({
                $inputs: $(this).find('input'),
                active: [],
                tracker: false
            });
        });

更改为

> self.$filters.find('.filters').each(function () {
>             self.groups.push({
>                 $inputs: $(this).find('input'),
>                 active: [],
>                 tracker: false
>             });
>         });

并在每个组上添加了css类“过滤器”

<div id="Filters">
    <div id="GendersFilter" class="filters"></div>
    ...
</div>

Mixitup.js和多重过滤

1 个答案: