jQuery Selector Test für alle eine ClassType

Question

Ich habe eine Tabelle. Die Tabellendatenelemente haben jeweils ein div mit einer Klasse in ihnen. Das div zeigt eine kleine CSS-Box an, die basierend auf der Hintergrundfarbe das Aussehen eines Lichts anzeigt, das ein- oder ausgeschaltet wird.

Ich möchte die Lichter einzeln ein- und ausschalten, indem ich auf sie (zufällig) klicke, aber dann muss ich testen, wenn irgendein Licht ausgeschaltet ist, sind alle Lichter jetzt aus.

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

Mit anderen Worten, wenn der letzte Klick der letzten „auf“ Licht ausgeschaltet, so dass all Leuchtkasten-on-Klassen mit Leuchtkasten-off-Klassen entfernt und ersetzt wurde, löst etwas.

Die Frage geht zu testen, ob eine Gruppe von Divs alle die gleiche Menge von identischen Klassen enthalten.

Answer 1

Mit JQuery können Sie dies ganz einfach mit etwas wie dieses:

$(".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"); 
    } 
}); 

Hier ist ein Beispiel: http://codepen.io/nathanfelix/pen/XdVrvo

Answer 2

Ich denke, die direkteste Sache zu tun ist, schalten Sie alle aus, bevor Sie die auf die Sie hinzufügen möchten.

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

Answer 3

Nach Klick oder umschalten, benutzen Sie .length die Anzahl der sichtbaren Elemente zu zählen, so etwas wie:

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

oder

if ($('.lightbox-on:visible').length == 0) { 
// they're all off, do something here 
}