jQuery 如何将 on() 与 if 语句一起使用

Question

我有一个当前工作正常的 if 语句：

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

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

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

谢谢！

Answer 1

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

您可以使用setInterval()定期检查和更新类：

setInterval(function() {
    $('body').toggleClass('has-sticky', $('div').hasClass('is-sticky'));
}, 1000);

Answer 2

你不能使用 .on() 来监视何时在 DOM 对象中添加或删除类。 jQuery不提供该功能。

您可以尝试查看何时修改类的操作包括：

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

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

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

4. 您可以调查是否有任何 DOM 突变观察者可以执行您想要的操作，并且在足够多的浏览器中受支持以解决您的问题。

Answer 3

为什么不创建一个自定义触发器，只要你把这个.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');
}

触发器块将类似于将调用处理程序的任何其他事件，如单击/鼠标输入。虽然这也可以是一个函数调用.....

Answer 4

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

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