Question

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

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

但是，类“.is-sticky”会从不同的jQuery插件动态添加到标记中。所以我想出我需要使用on（）以便不断观察被添加或删除的类。但我无法弄清楚如何在我当前的if语句中使用on（）。

我想要注意动态添加和删除“.is-sticky”，然后在存在时将“.has-sticky”的addClass添加到正文中。

谢谢！

Answer 1

.on()用于将事件处理程序绑定到选择器，其匹配元素可以动态更改。但是你没有绑定一个事件处理程序（当类被更改时没有触发事件），所以在这种情况下它没有帮助。

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

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

Answer 2

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

在修改类时，您可以尝试查看的内容包括：

在任何可能修改类的操作之后（如果这是你的所有代码，你应该知道它们），那么你可以调用一个测试类的函数，并在类被更改时执行它的工作。
您可以更改代码中修改该类的所有位置，以激活您自己的自定义更改事件或调用您自己的函数，然后您可以通过处理该事件或在该函数中完成您的工作。
您可以使用间隔计时器轮询DOM并查找更改（不推荐）。
您可以调查DOM mutation observers中的任何一个是否可以执行您想要的操作并在足够的浏览器中支持以解决您的问题。

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

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

Answer 4

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

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

jQuery如何使用if语句使用on（）

4 个答案: