jQuery 中如何根据 CSS 类的变化触发事件？

在 jQuery 中触发 CSS 类修改事件

在 jQuery 中，您可能会遇到需要在元素内添加或修改 CSS 类时执行事件的情况。但是，CSS 类更改时不存在触发的固有事件。

自定义事件解决方案

要解决此问题，您可以使用 trigger() 函数调用自定义事件。当您使用 addClass() 修改类时，您会引发自定义事件，然后可以将其绑定到特定元素。

$(this).addClass('someClass');
$(mySelector).trigger('cssClassChanged');

在代码的另一部分，您可以将自定义事件绑定到选择器并定义类更改发生时要执行的操作。

$(otherSelector).bind('cssClassChanged', data, function(){ do stuff });

示例实现

考虑以下代码snippet:

$(function() {
  var button = $('.clickme')
      , box = $('.box')
  ;
  
  button.on('click', function() { 
    box.removeClass('box');
    $(document).trigger('buttonClick');
  });
            
  $(document).on('buttonClick', function() {
    box.text('Clicked!');
  });
});

.box { background-color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">Hi</div>
<button class="clickme">Click me</button>

在此示例中，单击按钮时，将删除“box”类。这会触发自定义事件“buttonClick”，它将“box”类的 div 文本更改为“Clicked！”

以上是jQuery 中如何根据 CSS 类的变化触发事件？的详细内容。更多信息请关注PHP中文网其他相关文章！