Question

我有一个<select>项目选项下拉列表。如果某个商品“缺货”，则<option>会有一类“缺货”。

例如：

<select>
    <option value="red">Red</option>
    <option value="blue" class="out-of-stock" disabled="disabled">Blue</option>
    <option value="green">Green</option>
    <option value="yellow" class="out-of-stock" disabled="disabled">Yellow</option>
</select>
<p class="message hidden">Sorry, this item is out of stock</p>

这就是我想要实现的目标：

如果所有选项都有“缺货”类，则隐藏整个<select>下拉列表并从{{1}中删除“隐藏”类} element。

我尝试了以下内容，但是这隐藏了整个<p>，即使只有一个<select>有“缺货”类：

<option>

...只有当所有项目“缺货”时，如何隐藏$("select").each(function(){ if ($(this).children("option").hasClass("out-of-stock")) { $(this).addClass("hidden"); $("p.message").removeClass("hidden"); } });的任何想法？谢谢！

Answer 1

文档说明了hasClass：

确定是否为任何匹配的元素分配了给定的类。

这意味着如果所选元素中至少有一个具有该类，则返回true，因此对此问题没有帮助。

相反，您可以将孩子的数量与相关课程的孩子数量进行比较：

var $children = $(this).children();

if($children.length === $children.filter(".out-of-stock").length) {
   // all elements have this class
}

Answer 2

改变这个：

if ($(this).children("option").hasClass("out-of-stock")) {

到此：

if ($(this).children("option:not(.out-of-stock)").length == 0) {

简而言之，您计算所有没有缺货类的选项标签，如果长度为0表示所有选项标签都有缺货类，那么您可以继续采取行动根据它。

此外，您将$("p.message").removeClass("hidden");修改为$(this).next().removeClass('hidden')，以便仅针对缺货的选项显示隐藏的类。

Answer 3

我会选择：

$("select").each(function() {
    if(!$(this).find("option:not('.out-of-stock')").length) {
        $(this).addClass('hidden').next().removeClass('hidden');
    }
});

Answer 4

if($(".out-of-stock").length == $("option").length){
        $("select").addClass("hidden");
        $("p.message").removeClass("hidden");
}

检查<select>下拉列表中的所有项目是否具有特定类</select>

4 个答案: