jquery - 检查一个 div 是否包含所有四个类

Question

基本上这是 wordpress 的过滤器。

所有帖子都显示在一页中，我已将类别名称作为类添加到帖子的主 div (.box)，其中一个 div 将有多个类。

过滤器小部件中有四个下拉菜单，所有类别都列为选项。

我只想显示将所有事件类别名称作为类的 div。

代码如下。在 IF 条件下，如何使用“AND”的概念？

这段代码给我一个错误。

$('#filter select').change(function()
    {
            var upper=$('#upper').val();
            var sole=$('#sole').val();
            var toe=$('#toe').val();
            var midsole=$('#midsole').val();

            $('.box').each(function()
            {

                if($(this).hasClass(upper) && hasClass(sole) && hasClass(toe) && hasClass(midsole))
                {
                    $(this).show();
                }
                else{
                    $(this).hide();
                }
    });

});

Answer 1

您可以使用 $.fn.filter选择组合类的这样的方法:

$('#filter select').change(function () {
    var upper = $('#upper').val();
    var sole = $('#sole').val();
    var toe = $('#toe').val();
    var midsole = $('#midsole').val();

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

基本上，构造 '.' + [upper, sole, toe, midsole].join('.') 生成一个由四个类连接的字符串 . 字符:.class1.class2.class3.class4 ，它是同时具有所有 4 个类的 .box 元素的 CSS 选择器。