想要在Javascript CSS过滤器中保留“ALL”选项吗

首页上大约有16篇文章，有一个过滤器，其中有4个下拉列表显示文章类别。我将类别名称作为类添加到post div中，并使用javascript隐藏它们

使用以下代码筛选帖子

$('#filter select').change(function () {
var upper = $('#upper').val(); //these are IDs of select.
var sole = $('#sole').val();
var toe = $('#toe').val();
var midsole = $('#midsole').val();



var classes = '.' + [upper, sole, toe, midsole].join('.');
$('.box').hide().filter(classes,toeall).show(); 
});

.box是邮政集装箱的类别。这很好用

每个下拉列表中的第一个选项是“全部”，我想让它工作起来

例如，如果我选择ALL in-TOE下拉列表，它必须保留现有的结果，并且还显示那些将其中一个TOE类别作为类的帖子

使用下面的代码，我试图找到TOE下拉列表的所有值，并用这些类显示帖子

var toeall = new Array(); 
$('#toe option').each(function() {
   toeall.push('.'+$(this).val());
});

if(toe=="all")
{
    $('.box').hide().filter(classes&&toeall).show();
}

我知道上面的代码不正确，但有人能解释一下怎么做吗

更新：尝试以下操作：

    $('#filter select').change(function () {
var upper = $('#upper').val(); //these are IDs of select.
var sole = $('#sole').val();
var toe = $('#toe').val();
var midsole = $('#midsole').val(),

array1 = [upper, sole, toe, midsole];
        var ar =[];
            $.each(array1,function(index,val){
              if (val != 'all') {//note the value of all option has to be all
                  ar.push(val);
               }

            });
        if(ar.length == 0) {$('.box').show();} else {
           var classes = '.' + ar.join('.');
            $('.box').hide().filter(classes).show(); 
        }       

});

---

jshiddle:

好。。您可以尝试以下方法：

$('#filter select').change(function () {
    var upper = $('#upper').val(); //these are IDs of select.
    var sole = $('#sole').val();
    var toe = $('#toe').val();
    var midsole = $('#midsole').val(),
    array = [upper, sole, toe, midsole];
    var counter = 0;
    $.each(array,function(index,val){
         if (val == 'all') {//note the value of all option has to be all
             counter++;
         }
    })
    if(counter == array.length) {
        $('.box').show();
    } else {
        var classes = '.' + array.join('.');
        $('.box').hide().filter(classes).show(); 
    }
});

---

基本上，我检查所有选择是否都有，如果有，我显示所有框。否则我会筛选，因为至少有一个筛选器。

您需要一种方法来选择不是“全部”的值。这样做的方法是遍历所有元素并从数组中删除不需要的元素。例如，通常使用array.stipleindex，1函数执行此操作

然而，前面关于splice的回答中的问题是，它会从数组中删除索引，因此如果有四个元素，则会删除第三个元素，并且当每个循环进入第四个元素时，就不会有第四个元素，因为它变成了第三个元素。要解决此问题，您可以：

将所需元素放入新数组中，而不是删除它们 从旧阵列 使用索引不改变值的数组，使其具有关联性 使用带有i变量的each循环，该变量在每次删除元素时都会减小 更新：

使用本机javascript过滤器轻松过滤掉内容 我使用列表中的第一个创建了这个示例，并对其进行了测试：我选择了第四种技术，因为它主要是普通的javascript，请查看注释代码和选择的备选方案：

这是上述三四个方案中最简单的一个，并且仍然可读

它使用过滤器选项轻松删除“所有”值

function isNotAll(value) {
  return value != 'all';
}
totals.filter(isNotAll);

完整代码：

$'filter select'.changefunction{ var upper=$'upper'.val， sole=$'sole'.val， toe=$'toe'.val， 中底=$‘中底’.val， 总计=[鞋面、鞋底、脚趾、中底]； 函数不是全部值{ 返回值！=“全部”； } var filtered=总计。过滤器不高； $.box.show； 如果已过滤，则为0.1长度{ $.box.hide.filter'.+filtered.join'..show； }

---

};请看这把小提琴，如果你把一个选项改成其他的，然后再次选择全部，它将不起作用！这已经做了些什么！但我需要一些时间来确保它工作正常。如果有，我会接受的。谢谢你，伙计！你能在你的问题中加入相关的html吗？提琴是一种奖励，但我们应该能够从问题本身的信息中重现您的问题/场景，而无需查看其他地方。@DavidThomas我已经清理了演示。HTML太长了，伙计！！请查看我的答案，它还包括一个警报，说明搜索的类。您可以很容易地看到“所有”选项被过滤掉。这在选择“.all”元素时不起作用。因为它们不存在，所以没有显示任何元素。它在哪里选择所有元素？一切都是一种选择。@Joelalmeda谢谢你，伙计！这也有帮助。男人们保持冷静：一切都是一种选择，但它不是一类可过滤的div。他们有类似于box-30 cat-37 cat-23 cat-26的课程。如果您选择.all.cat-23，它将不返回任何内容。我们将使用递归：过滤器工作得更好。我第一次就忘了：P