Javascript: Wenn hasClass dann addClass

Question

Ich bin neu in Javascript. Ich möchte eine 'animated fadeInLeft' Klasse zu einem Bild hinzufügen, wenn der div-Umbruch eine Klasse 'active' hat und die 'animated fadeInLeft' Klasse entfernt, wenn das div seine 'aktive' Klasse verloren hat. Irgendwie funktioniert es nicht richtig. Hier

ist die Javascript-Code:

<script> 
    $(document).ready(function() { 
    if ($('#section1').hasClass('active')) { 
     $('#blueleft').addClass('animated fadeInLeft'); 
    } 
    else { 
     $('#blueleft').removeClass("animated fadeInLeft"); 
    } 
    }); 
</script> 

Hier ist der HTML ist:

<div class="section" id="section1"> 
    <h2>Wireless Digital Music System</h2> 
    <p>Streaming tracks</p> 
    <img id="blueleft" class="blueleft" src="img/blueleft.png" alt="blueleft"> 
    <img id="blueright" class="blueright" src="img/blueright.png" alt="blueright"> 
</div> 

Ich habe eine andere Javascript-Skript ausgeführt wird, die die 'aktive' Klasse zu einem div Abschnitt hinzuzufügen. Es gibt kein Problem damit. Wenn ich 'div.section' anstelle von '# section1' setze, wird das ganze Skript ausgeführt, und es wird '#blueleft' eine Klasse hinzugefügt. Ich kann es vom Inspektor aus sehen, es wird auch eine Animation zeigen, weil ich animated.css benutze. Aber es wird nicht funktionieren, wenn ich '# section1' setze. Es wird die Klasse "animated fadeInLeft" nicht hinzugefügt. Ich muss ID anstelle von Klasse verwenden, weil ich andere divs habe, die auch den Klassennamen 'section' haben, aber sie haben unterschiedliche IDs. Weiß jemand, was das Problem sein könnte?

Answer 1

if($("div#section1.active").length){ 
    $('#blueleft').addClass('animated fadeInLeft'); 
} else { 
} 

Answer 2

Wenn Sie mehrere div mit der gleichen ID aufweisen, sind, dann ist dies ungültige HTML und das Problem ist, wenn Sie ein Element mit $ (‚# elementId‘) zugreifen wird es nur das erste Element in HTML gefunden zurückkehren so Sie müssen, wie unten für jede Schleife verwenden,

$('div[id^="section1"]').each(function(){ 
    if ($(this).hasClass('active')) { 
     $(this).find('#blueleft').addClass('animated fadeInLeft'); 
    }else { 
     $(this).find('#blueleft').removeClass("animated fadeInLeft"); 
    } 
}) 

dies mit section1 id all das Element finden und die Logik anwenden.