onclick-Funktion erfordert Doppelklick wegen Klassenzuweisungsverzögerung

Question

Der Titel sagt alles. Ich habe eine Liste von LI-Elementen. Wenn auf die Navigation geklickt wird, bekommt die aktive li eine Klasse 'current', aber das dauert eine Sekunde. Aber wenn ich meinen Code verwende, muss ich auf das Nav klicken, dann öffnet sich das li und ich muss erneut klicken, um den Code registrieren zu lassen. Der Ort der Videos kann nicht fest codiert werden! Es muss dynamisch sein.

(function($) { 
$(document).ready(function(){ 
    $('video').each(function() { 
     $(this).get(0).pause(); 
    }); 
    $('.slides').children('li').addClass('test'); 
}); 

$(document).on('click','span',function(){ 

    if ($('li').hasClass('current')) { 
     $('li.test').find('video').each(function() { 
      $(this).get(0).pause(); 
     }); 
     $('li.current.test').find('video').each(function() { 
      $(this).get(0).play(); 
     }); 

    } 
}); 
})(jQuery); 

http://codepen.io/hennysmafter/pen/aNrVKG?editors=1010

Leider werde ich nicht für die nächste Stunde oder so verfügbar sein, aber danach wieder! Alle danken Ihnen für Ihre Hilfe.

Answer 1

fand ich, was das Problem verursacht: wird „.Current“ Klasse, wenn eine Spanne geklickt hat

Sie spielen die Elemente, deren Eltern.

Wenn Sie jedoch auf ein Element klicken, wird die Klasse ".show" angezeigt, und der zuvor ausgewählte Bereich erhält die Klasse ".hide" UND behält die Klasse ".current" bei, bis die Animation beendet ist. .show "&" .hide "-Klasse wird entfernt und die" .current "-Klasse wechselt Elemente.

Eine Lösung ist die Selektoren wie folgt zu ändern:

$(document).on('click','span',function(){ 
     console.log('the if is running'); 
     $('.current, .hide').find('video').each(function() { 
      $(this).get(0).pause(); 
     }); 
     $('.show').find('video').each(function() { 
      $(this).get(0).play(); 
     }); 

}); 

Auf diese Weise, wenn eine Spanne geklickt wird, pausieren Sie das Element, dessen Eltern die „.Hide“ Klasse haben, und spielen diejenigen, deren Eltern habe die Klasse ".show". Eine andere Lösung sollte ein Ereignis erstellen, wenn eine Klasse angewendet wird (siehe jQuery - Fire event if CSS class changed).