Javascript 所有类类型的jQuery选择器测试

我有一张桌子。每个表数据元素都有一个div，其中包含一个类。div显示一个小的CSS框，该框基于背景颜色显示灯光的外观，灯光可以打开或关闭

我想通过单击灯光（随机）来分别打开和关闭灯光，但我需要测试何时关闭任何灯光，是否所有灯光都已关闭

<table>
    <tr>
        <td>
            <div class="lightbox lightbox-on">
        </td>
    </tr>
    <tr>
        <td>
            <div class="lightbox lightbox-off">
        </td>
    </tr>
    ...
 </table>

...

换句话说，如果最近一次单击关闭了最后一个“开”灯，那么类上的所有lightbox都已被删除并替换为lightbox off类，则会触发某些事件

---

问题是测试一组div是否都包含同一组相同的类。

我认为最直接的方法是在将其添加到所需的div之前关闭所有div

$('.lightbox').removeClass('lightbox-on');

---

单击或切换后，使用.length计算可见元素的数量，如：

if ( $('.lightbox-on:visible').length == 1) {
// only 1 lit, do something here
}

或

---

使用JQuery，您可以很容易地通过以下方式实现这一点：

$(".lightbox").click(function() {

  // Remove the lastturnedon class from all lights
  $(".lightbox").removeClass("lastturnedon");

  if (!$(this).hasClass("lightbox-on")) {
    // Add the the lastturnedon class to the clicked light only if we are turning it on.
    $(this).addClass("lastturnedon");
  }

  // Changing the lights state (on/off).
  $(this).toggleClass("lightbox-on");

  if (!$(".lightbox").hasClass("lightbox-on")) {
    // Alert if now that we turned off this light, all lights are off
    alert("All lights are off");
  }
});

以下是一个例子：

---

打开/关闭类的javascript在哪里？我会更新其中的一个变量，该变量会更新最后一个关闭的项目。可以多次单击灯光，以便在多个灯光同时打开的情况下打开和关闭多个灯光。导致触发的条件是当它们达到所有指示灯同时关闭的状态时。因此，您只想测试该类是否不存在：

if（！（$（“.lightbox on”）.length））{…}

换句话说，所有div同时具有相同的类。

$(".lightbox").click(function() {

  // Remove the lastturnedon class from all lights
  $(".lightbox").removeClass("lastturnedon");

  if (!$(this).hasClass("lightbox-on")) {
    // Add the the lastturnedon class to the clicked light only if we are turning it on.
    $(this).addClass("lastturnedon");
  }

  // Changing the lights state (on/off).
  $(this).toggleClass("lightbox-on");

  if (!$(".lightbox").hasClass("lightbox-on")) {
    // Alert if now that we turned off this light, all lights are off
    alert("All lights are off");
  }
});