Javascript/JQuery - 按多个类排序

Question

在这里遇到一些麻烦,任何帮助将不胜感激......

我试图隐藏并显示基于分配给它们的几个类的一堆列表项.

在我的JS小提琴示例中,我有几个与其描述相关的类.

我设法隐藏并展示了这些,但复杂的选择是不可能的......

例如:如果我想只看到有"溢价","蓝色"和"麻"面料.

像这样的东西(工作大声笑)就是我追求的......

$('.sel_range').click(function() {
  range = document.getElementById("range").value;
  if ($('.fabric_option').hasClass(range)) {
    $('.' + range).fadeIn('fast', function() {
       !$('.fabric_option').hasClass(range).fadeOut("fast");
    });
  }
});

Answer 1

这样的事情应该有效

var selects = $('#range, #fabric, #colour');

selects.on('change', function() {
    var el = selects.map(function(i, item) {
        return item.value.indexOf('all_') === 0 ? '' : '.' + item.value;
    }).get().filter(function(x)  { 
        return x.length; 
    }).join('');

    $('#fabric_options li').show().not(s?s:'*').hide();
});

小提琴

它首先显示所有列表项,然后将值连接在一起以创建一个clas选择器,如果all_something被选中则忽略该类等,然后隐藏所有不匹配的内容,如果没有选择,则排除所有内容.