Question

我根本不知道javascript所以一直试图将它拼凑在一起，我已经使用了同位素，并使用iCheck设置了复选框样式。

这是我想要达到的同位素效应 - 多个组合过滤器：http://codepen.io/desandro/pen/btFfG

如果没有iCheck，该功能可以正常工作，但是一旦添加iCheck，复选框就无效了 - 过滤仍然有效。

EG。加载时，默认情况下会选中“任何卧室”。选中“4间卧室”时，“任何卧室”应取消选中。然后，如果我要取消选中“4间卧室”，则需要再次检查“任何卧室”。

我在这里做了一点小提琴：http://jsfiddle.net/KW5H2/1/

    jQuery('input').each(function () {
    var self = jQuery(this),
        label = self.next(),
        label_text = label.text();

    label.remove();
    self.iCheck({
        checkboxClass: 'icheckbox_line-red',
        radioClass: 'iradio_line',
        insert: '<div class="icheck_line-icon"></div>' + label_text
    });
});

var jQuerycontainer;
var filters = {};

jQuery(function () {

    jQuerycontainer = jQuery('#container');

    jQuerycontainer.imagesLoaded(function () {
        jQuerycontainer.fadeIn().isotope({
            itemSelector: '.element'
        });
    });

    jQuerycontainer.isotope();
    // do stuff when checkbox change
    jQuery('#options').on('ifChanged', function (jQEvent) {
        var jQuerycheckbox = jQuery(jQEvent.target);
        manageCheckbox(jQuerycheckbox);

        var comboFilter = getComboFilter(filters);

        jQuerycontainer.isotope({
            itemSelector: '.element',
            filter: comboFilter


        });

    });

});

function getComboFilter(filters) {
    var i = 0;
    var comboFilters = [];
    var message = [];

    for (var prop in filters) {
        message.push(filters[prop].join(' '));
        var filterGroup = filters[prop];
        // skip to next filter group if it doesn't have any values
        if (!filterGroup.length) {
            continue;
        }
        if (i === 0) {
            // copy to new array
            comboFilters = filterGroup.slice(0);
        } else {
            var filterSelectors = [];
            // copy to fresh array
            var groupCombo = comboFilters.slice(0); // [ A, B ]
            // merge filter Groups
            for (var k = 0, len3 = filterGroup.length; k < len3; k++) {
                for (var j = 0, len2 = groupCombo.length; j < len2; j++) {
                    filterSelectors.push(groupCombo[j] + filterGroup[k]); // [ 1, 2 ]
                }

            }
            // apply filter selectors to combo filters for next group
            comboFilters = filterSelectors;
        }
        i++;
    }

    var comboFilter = comboFilters.join(', ');
    return comboFilter;
}

function manageCheckbox(jQuerycheckbox) {
    var checkbox = jQuerycheckbox[0];

    var group = jQuerycheckbox.parents('.option-set').attr('data-group');
    // create array for filter group, if not there yet
    var filterGroup = filters[group];
    if (!filterGroup) {
        filterGroup = filters[group] = [];
    }

    var isAll = jQuerycheckbox.hasClass('all');
    // reset filter group if the all box was checked
    if (isAll) {
        delete filters[group];
        if (!checkbox.checked) {
            checkbox.checked = 'checked';
        }
    }
    // index of
    var index = jQuery.inArray(checkbox.value, filterGroup);

    if (checkbox.checked) {
        var selector = isAll ? 'input' : 'input.all';
        jQuerycheckbox.siblings(selector).removeAttr('checked');


        if (!isAll && index === -1) {
            // add filter to group
            filters[group].push(checkbox.value);
        }

    } else if (!isAll) {
        // remove filter from group
        filters[group].splice(index, 1);
        // if unchecked the last box, check the all
        if (!jQuerycheckbox.siblings(':checked').length) {
            jQuerycheckbox.siblings('input.all').attr('checked', 'checked');
        }
    }

}

有人可以解释一下吗？

Answer 1

它有点晚了但也许如果你仍然感兴趣，你可以重新设计你的代码，如 [myfiddle][1] 。
当你使用同位素V2时，结果会更好。

  [1]: http://jsfiddle.net/Cagdas/rm7o686v/2/

jQuery同位素组合过滤器与复选框和jQuery iCheck

1 个答案: