jQuery - захват события: текущий элемент имеет определенный класс, но время от времени меняется

Question

У меня есть слайдер с 4 элементами, любой из которых имеет класс 'control_tab'.Активный элемент имеет класс «активный».Через несколько секунд ползунок перемещается, и следующий элемент становится активным.Тогда у него есть класс «активный»;предыдущий элемент, который ранее был активным, теряет класс 'active'.

Мне нужно знать, когда элемент становится активным.Как только любой элемент становится активным при добавлении класса 'active', индекс активного элемента выводится на консоль.

Вот пример кода:

<div id="controls">   
  <a href="#" class="control_tab">
    <span>A</span>
  </a>
  <a href="#" class="control_tab active">
    <span>B</span>
  </a>
  <a href="#" class="control_tab">
    <span>C</span>     
  </a>
  <a href="#" class="control_tab last">
    <span>D</span>    
  </a>    
</div>

Извините, если сообщение немного запутано, я устал думать об этом: p

Спасибо за вашу помощь.

R.

Answer 1

Если у вас нет контроля над кодом, который добавляет / удаляет класс active, есть плагин под названием livequery, который будет запускать код для вас при изменении DOM, которое соответствует селектору.

http://brandonaaron.net/code/livequery/docs

$('.active').livequery(function() {
    console.log($(this).index() + ' is now active');
});

Может также запускать код, когда элемент удален (или не сопоставлен).

$('.active').livequery(function() {
    console.log($(this).index() + ' is now active');
}, function() {
    console.log($(this).index() + ' is no longer active');
});