是否可以缩小此选择器？
if ($("#element1").hasClass("highlight") && $("#element2").hasClass("highlight") && $("#element3").hasClass("highlight") && $("#element4").hasClass("highlight") && $("#element5").hasClass("highlight")) {
$("#newstyle).css("visibility","visible");
};
我已经试过了
if ($("#element1,#element2,#element3,#element4,#element5").hasClass("highlight"))
和
if ($("#element1 && #element2 && #element3 && #element4 && #element5").hasClass("highlight"))
……但这是不正确的.
基本上我有很多相同的条件：5个指定元素hasClass XYZ.所以我很感激压缩它.
解决方法
你走在正确的轨道上.我应该注意到,我假设模式element1,element2,element3并不是你的ID,你刚刚在问题中使用了它…
我可能会把它转过头来：使用一组带有#element：not(.highlight)的选择器,如果结果是空的(长度== 0),它们都有它或者不存在.
if (!$("#element1:not(.highlight),#element2:not(.highlight),#element3:not(.highlight),#element4:not(.highlight),#element5:not(.highlight)").length) {
$("#newstyle").css("visibility","visible");
}
他们都有类的例子：
if (!$("#element1:not(.highlight),"visible");
}
<div id="element1" class="highlight"></div> <div id="element2" class="highlight"></div> <div id="element3" class="highlight"></div> <div id="element4" class="highlight"></div> <div id="element5" class="highlight"></div> <div id="newstyle" style="visibility: hidden">I'm visible!</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
而且其中至少有一个没有：
他们都有类的例子：
if (!$("#element1:not(.highlight),"visible");
}
<div id="element1" class="highlight"></div> <div id="element2" class="highlight"></div> <div id="element3"></div> <div id="element4" class="highlight"></div> <div id="element5" class="highlight"></div> <div id="newstyle" style="visibility: hidden">I'm visible!</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
如果它是所有相同的类,如在您的示例中,我们可以更简洁：
if (!$("#element1,#element5").not(".highlight").length) {
$("#newstyle").css("visibility","visible");
}
他们都有类的例子：
if (!$("#element1,"visible");
}
<div id="element1" class="highlight"></div> <div id="element2" class="highlight"></div> <div id="element3" class="highlight"></div> <div id="element4" class="highlight"></div> <div id="element5" class="highlight"></div> <div id="newstyle" style="visibility: hidden">I'm visible!</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
并且至少有一个不是：
if (!$("#element1,"visible");
}
<div id="element1" class="highlight"></div> <div id="element2" class="highlight"></div> <div id="element3"></div> <div id="element4" class="highlight"></div> <div id="element5" class="highlight"></div> <div id="newstyle" style="visibility: hidden">I'm visible!</div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
