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

Question

То, что я пытаюсь сделать, - это когда p наследует класс "active", и div.test будет правильно печатать ссылку rel.

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

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

Проверьте этот код в действии .

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

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.