Question

基本上这是wordpress的过滤器。

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

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

我想只显示具有所有活动类别名称的div作为类。

以下是代码。在IF条件下，我如何使用＆＃34; AND＆＃34;？的想法？

此代码给我一个错误。

$('#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，它是.box元素的CSS选择器，其中包含所有4个类同一时间。

Answer 2

您忘了$(this)到hasClass。

if($(this).hasClass(upper) && $(this).hasClass(sole) && $(this).hasClass(toe) && $(this).hasClass(midsole)) {
    // Yes this div has all four classes
}

Answer 3

var ele=$(this);

if(ele.hasClass(upper) && ele.hasClass(sole) && ele.hasClass(toe) && ele.hasClass(midsole))

您必须将$(this)提供给if条件中的所有.hasClass API。
因此，不要重复，而是将其分配给变量并按上述方式使用。

Answer 4

您忘记了对象jquery选择器$(this)。

    if ($(this).hasClass(upper) && $(this).hasClass(sole) && $(this).hasClass(toe) && $(this).hasClass(midsole)) {
        ...
    }

Answer 5

如果您确定，可以使用this.hasClass("class1 class2 class3")，其他

this.hasClass("class1) && this.hasClass("class2 ")

Answer 6

更美妙的方法： $（ “＃MYID”）。是（ “foo.bar”）

编辑：这也与类的顺序无关

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

6 个答案: