Question

我想要做的是当p继承“active”类时div.test将正确打印链接rel。

目前，如果页面加载时没有将类分配给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。

更新动态html属性

2 个答案: