Обновить динамический атрибут html

Question

То, что я пытаюсь сделать, это когда p наследует класс «active», который div.test корректно распечатает ссылку.

В настоящее время, если страница загружается без класса, присвоенного тегу p, этого не произойдет. Как я могу это сделать, когда тэг p наследует класс «активный», ссылка, напечатанная в div.test, вернет правильную распечатку?

$(document).ready(function(){ 
    var relvar = $('p.active').attr('rel'); 
    $("div.test").html("<a rel='"+ relvar +"'>hello</a>"); 

    $("p").click(function() { 
    $(this).toggleClass("active"); 
    }); 

    }); 

Answer 1

Я не уверен, что вы просите. Вы говорите, что вы хотели бы этот код:

var relvar = $('p.active').attr('rel'); 
$("div.test").html("<a rel='"+ relvar +"'>hello</a>"); 

для запуска всякий раз, когда <p> элемент изменяет классы? Если да, то нет «onchangeclass» события или что-нибудь подобного, но вы могли бы на самом деле создать свое собственное событие, чтобы справиться с этим:

$('p').bind('toggleActive', function() { 
    if($(this).hasClass('active')) { 
     var relvar = $(this).attr('rel'); 
     $("div.test").html("<a rel='"+ relvar +"'>hello</a>");   
    } 
}).click(function() { 
    $(this).toggleClass('active').trigger('toggleActive'); 
}); 

Check this code in action.

Это на самом деле круговое движение - было бы проще просто выполнить логику в самом обработчике кликов. Основным преимуществом перехода его на свое событие является то, что если вам нужно сделать это в другом месте кода, вы можете сохранить эту логику отдельно и просто «запустить» ее по мере необходимости.

Answer 2

Не совсем уверен, что это то, что вы собираетесь делать, но не можете ли вы обработать его в коде click?

$(document).ready(function() { 
    $('p').click(function() { 
    $(this).toggleClass('active'); 

    if ($(this).hasClass('active')) { 
     relvar = $(this).attr('rel'); 

     $('div.test').html("<a rel='" + relvar + "'>hello</a>"); 
    } else { 
     $('div.test').html("<a>hello</a>"); 
    } 
    }); 
}); 

Насколько я знаю, вам придется связываться с некоторые события для того, чтобы проверить и посмотреть, если это необходимо обновить DIV.