Функция onclick требует двойного щелчка из-за задержки назначения класса

Question

В названии говорится все. Я получил список элементов LI. Когда вы нажимаете на навигацию, активный li получает класс «current», но это занимает второе место. Но когда я использую свой код, мне нужно нажать на навигатор, затем откроется ли я, и мне нужно снова щелкнуть, чтобы сделать регистр кода. Место видео не может быть жестко запрограммировано! Он должен быть динамичным.

(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

К сожалению, я не буду доступен в течение следующего часа или около того, но буду вернуться после этого! Все спасибо за помощь.

Answer 1

я нашел то, что вызывает вопрос:

Вы играете элементы, чьи родители имеют «.Current» класс, когда пролет щелкнул.

Но когда вы нажимаете на элемент, он и класс «.show», а ранее выбранный диапазон получает класс «.hide» И сохраняет класс «.current», пока анимация не будет закончена (тогда " .show "&" .hide "класс удаляются, а элементы переключателя класса" .current ").

Одно из решений меняются селекторы следующим образом:

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

}); 

Делая это, всякий раз, когда интервал будет нажат, вы приостановите элемент, родители которого имеет класс «.hide», и играть те, чьи родители имеют класс «.show».

Другим решением должно быть создание события при применении класса (см. jQuery - Fire event if CSS class changed).