检查一个 div 是否具有所有四个类答案

【问题标题】：Check if a div has all four classes检查一个 div 是否具有所有四个类
【发布时间】：2015-07-08 06:40:25
【问题描述】：

基本上这是一个 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();
                }
    });

});

【问题讨论】：

你错过了$(this). 和hasClass(sole)
你可能需要看看stackoverflow.com/questions/2214952/…
@madalinivascu ：这些不是 div，而是选择下拉菜单。

标签： jquery html css

【解决方案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 个类。

【讨论】：

这是个病夫！马上就上班了。还有一个问题。每个下拉列表的第一个选项是我手动添加的“全部”。如果选择了 ALL，我如何使它工作，以便显示该下拉列表下的类别之一的帖子？非常感谢老兄的帮助。

【解决方案2】：

你忘记了 $(this) 到 hasClass。

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

【讨论】：

感谢图沙尔的帮助。

【解决方案3】：

var ele=$(this);

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

您必须在 if 条件下将 $(this) 提供给所有 .hasClass API。
所以不要重复它，而是将它分配给一个变量并像上面一样使用它。

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

您可以使用this.hasClass("class1 class2 class3")，如果您确定顺序，否则

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

【讨论】：

【解决方案6】：

一个更漂亮的方式来做到这一点： $("#myId").is(".foo.bar")

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

【讨论】：