0

我有一个当前运行良好的 if 语句：

if ($('div').hasClass('is-sticky')) {
  $('body').addClass('has-sticky');
}

然而，“.is-sticky”类是从不同的 jQuery 插件动态添加到标记中的。所以我发现我需要使用 on() 来不断观察该类被添加或删除。但我不知道如何在我当前的 if 语句中使用 on() 。

我想观察动态添加和删除“.is-sticky”，然后在它存在时将“.has-sticky”添加到正文中。

谢谢！

4

4 回答 4

0

.on()用于将事件处理程序绑定到其匹配元素可能会动态更改的选择器。但是您没有绑定事件处理程序（更改类时不会触发事件），因此在这种情况下它没有帮助。

您可以使用setInterval()定期检查并更新课程：

setInterval(function() {
    $('body').toggleClass('has-sticky', $('div').hasClass('is-sticky'));
}, 1000);
于 2013-10-01T01:55:11.460 回答
0

您不能用于.on()监视何时从 DOM 对象中添加或删除类。jQuery 不提供这种能力。

您可以尝试查看何时修改类的各种操作是：

  1. 在任何可能修改类的操作之后（如果这是您的所有代码，您应该知道这些），然后您可以调用一个函数来测试类并在类已更改时执行其工作。

  2. 您可以更改代码中修改该类的所有位置，以触发您自己的自定义更改事件或调用您自己的函数，然后您可以通过处理该事件或在该函数中完成您的工作。

  3. 您可以使用间隔计时器来轮询 DOM 并查找更改（不推荐）。

  4. 您可以调查是否有任何DOM 变异观察者可以做您想做的事情，并在足够多的浏览器中得到支持来解决您的问题。

于 2013-10-01T02:01:28.820 回答
0

每当您将此 .is-sticky 类添加到元素时，为什么不创建自定义触发器？

触发器处理程序将类似于：

$('body').on('classAdded', function() {
   $(this).addClass('has-sticky');
});

触发块将如下所示：

function whatever() {
   // logic that adds the class to $('div') .......
   // at this point, your $('div') has the is-sticky class already right?
   $('body').trigger('classAdded');
}

触发块将与调用处理程序的任何其他事件（如 click/mouseenter）一样。虽然这也可以是一个函数调用......

于 2013-10-01T02:02:42.297 回答
0

这可能很 hacky，但是您可以为is-sticky该类定义一个非常短的 CSS 过渡，然后绑定到transitionend事件。使用它，您应该能够知道何时在 IE10+ 和常青浏览器中添加了该特定类。

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/transitionend

于 2013-10-01T03:24:37.473 回答