Javascript 循环浏览元素列表，查看它们是否处于活动状态

我有一个元素列表（

），其中有两个特定的

，它们共享一个类（

.example

），我想检查当这些元素中的任何一个处于活动状态时（具有class

.active

）是否会出现一个弹出窗口

在切换class.active的click事件上，我添加了一个循环来检查

元素中是否有这两个类，但我似乎无法使它正常工作

$('ul li').click(function() {
    $(this).toggleClass('active');

    $("ul li").each(function() {
      if($(this).hasClass('example') && $(this).hasClass('active')){
          $('.pop-up').css("display", "block")
        } else {
          $('.pop-up').css("display", "none")
      }
    })
  });

---

如果其中一个或两个元素都有.example和.active类，则应显示弹出窗口。

下面的示例按您的意愿操作

问题- 我认为代码的问题在于，根据定义，某些元素缺少类

.example

和

.active

，因此在激活示例的情况下，它将显示模式，但在循环所有其他列表项时再次隐藏

方法一-调整您的代码并使其更有效，检查两个类的

是否存在
li
。活动。示例

方法二-稍微快一点，因为它只是假设任何单击

li的操作都会显示弹出窗口。示例

元素应该显示弹出窗口（这可能是您期望的用户体验，因为不太可能通过单击

li

的过程关闭弹出窗口，而是通过其自身的关闭按钮或类似按钮关闭）

正如@Hackbyrd所提到的，如果您正在动态加载这些

li

元素（即，当页面加载时它们不存在），您可能希望将事件侦听器放置在父DOM元素上

我添加了一些样式，以帮助说明发生了什么<代码>。活动的元素带下划线

如果这不是你所希望的，请告诉我

---

演示

//方法一
//将单击事件添加到列表项
$（'ul li'）。单击（函数（）{
//将活动类添加到单击的列表元素
$（this.toggleClass（'active'）；
//检查是否存在.example.active
//即数组长度大于0
如果（$（（“ul li.example.active”）.length>0）{
$（'.pop-up'）.css（“显示”、“块”）
}否则{
$（'.pop-up'）.css（“显示”、“无”）
}
});
//方法二
//将单击事件添加到第二个示例中
$（'ul li.example2'）。单击（函数（）{
//显示弹出窗口
//这假定由于任何其他原因不需要.active类
//模式通过不同的方法关闭（即模式内的关闭按钮，这是典型的模式）
$（'.pop-up'）.show（）；
});
//不应该是必需的，您的模态应该已经有一个结束方法了
//仅用于演示目的
$（“a.close-pop”）。单击（函数（）{
$（'.pop-up'）.hide（）；
});
。弹出窗口{
显示：无；
边框：1px纯黑；
填充：20px；
}
.举例{
颜色：蓝色；
}
.例2{
颜色：绿色；
}
李：很活跃{
文字装饰：下划线；
}


不是示例列表项
示例列表项
示例列表项-方法2
示例列表项
示例列表项-方法2
不是示例列表项

弹出

关
您可能遇到的另一个问题是ul和li元素是动态加载到DOM中的（这意味着它不是在加载页面时加载的，而是通过其他各种事件加载的）

如果是这种情况，则需要在树中选择更高的父元素来附加事件侦听器

此外，就像前面的注释和答案一样，您可以显著缩短代码，但可以将其附加到文档（或者在页面加载时加载到页面中的父元素，我选择文档是因为我可以看到您的HTML代码），这样，动态加载与否不会产生任何影响

$(document).on('click', 'ul li .example .active', function(e){ $('.pop-up').show(); })

您也可以使用此方法


showPopUp（）；
$（'ul li.example'）。单击（函数（）{
if（$（this）.hasClass（'active'））{
$（'ul li'）.removeClass（'active'）；
}否则{
$（'ul li'）.removeClass（'active'）；
$（this.addClass（'active'）；
}
showPopUp（）；
});
函数showPopUp（）{
如果（$（'ul li.example.active'）。长度>0）{
$（'.pop-up'）.show（）；
}否则{
$（'.pop-up'）.hide（）；
}
}
。示例{
颜色：#808080；
光标：指针；
}
例如：主动的{
颜色：#22222；
字号：600；
}
.弹出窗口{
显示：无；
}


试验
测试2
测试示例
测试3
测试2示例

这是一个弹出窗口
您可以添加一些HTML吗？我不太清楚你的要求。我觉得这可以使用组合选择器和
.length
实现，而不需要循环。例如，
if（$（（$li.example.active”）.length）
将返回
true
，如果有
元素同时具有class
example
和class
active
。这是一个标准的ul-li结构，其中有五个
元素，其中前两个元素具有class-example this worked！妈的，我觉得自己好笨，太谢谢你了！很高兴有帮助，我们都去过那里！