как заставить JQuery реагировать на изменения класса

Question

У меня есть простая навигация по вкладкам с jquery.При каждом нажатии новой вкладки сценарий добавляет к текущему элементу списка навигации класс «currentNav» и удаляет его из предыдущего выбранного элемента списка.Теперь я хочу изменить фон mother ul, когда второй элемент списка получит класс «currentNav».Начальное значение по умолчанию - первый элемент списка имеет этот класс.Моя проблема в том, что я не знаю, как я могу заставить jquery реагировать на это изменение.*

if($("ul#AuktionenNav li a.two").hasClass("currentNav")) {
        $("ul#AuktionenNav").css("background-image", "url(../system/css/images/eingestellte_Auktionen.png)")
    }

Я ценю любую помощь!Thx!

Answer 1

Установить триггер и привязку:

// When an <li> (NOT the first one) is clicked, tell the <ul>
$('ul#AuktionenNav li').not(':first-child').click(function(){ 
    $(this).trigger('li_clicked'); 
});

// When the FIRST <li> is clicked, reset the background
$('ul#AuktionenNav li:first-child').click(function(){ 
    $('ul#AuktionenNav').css("background-image", "url(../system/css/images/default.png)");
});
// Listen for an <li> click
$('ul#AuktionenNav').bind('li_clicked',function(){
    $(this).css("background-image", "url(../system/css/images/eingestellte_Auktionen.png)");
});

Я знаю, что в вашем примере есть только два <li> тега, но он легко масштабируется, сохраняя первый <li> "resetter"

Answer 2

Один из способов сделать это - использовать события мутации DOM:

$('ul').bind('DOMSubtreeModified',

function() {
    $(this).closest('ul').addClass('red');
});

$('#toggle').click(
    function(){
        $('ul li:nth-child(2)').toggleClass('highlight');
        return false;
    });

JS Fiddle demo .

Answer 3

ЗДЕСЬ ДЕМО

$('ul#AuktionenNav li a').click(function() {
    $(this).addClass('currentNav');
    if ($("ul#AuktionenNav li a.two").hasClass("currentNav")) {
        $("ul#AuktionenNav").css("background-image", "url(../system/css/images/eingestellte_Auktionen.png")
    }
});