javascript - 更新动态 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');
});

Check this code in action .

这实际上有点迂回 - 最简单的做法是在点击处理程序本身中执行逻辑。将它移动到它自己的事件的主要优点是，如果您随后需要在代码的其他地方执行此操作，您可以保持该逻辑独立并在需要时“触发”它。