Question

我有一段代码使用jquery从<div>中删除一个类。是否可以通过事件在删除类时触发另一个jquery函数？

HTML

<div class="square"></div> <br/>
<div class="square test"></div><br/>
<div class="square"></div> <br/>
<div class="square"></div>
<button>test</button>

CSS

.square{
width: 100px;
height: 100px;
background-color: red;
}
.pink{
background-color:pink;
}

的javascript

$(document).on("*changedtopink*", "div", function(){
   alert("it changed");
});
$(document).on("click","button",function(){
   $(".test").addClass("pink");
});

Answer 1

您可以trigger举办自己的活动：

<强> HTML

<div class="square"></div> <br/>
<div class="square"></div> <br/>
<div class="square"></div> <br/> 
<div class="square"></div>

<强> CSS

.square{
    width: 100px;
    height: 100px;
    background-color: red;
}

.rectangle{
    width: 200px;
    height: 100px;
    background-color: green;
}

<强>的jQuery

$("div").on("changedClass", function(){
    $(this).addClass("rectangle");
});

$(document).on("click", "div", function(){
    $(this).removeClass("square");               
    $(this).trigger("changedClass");
});

在此示例中单击红色方块将删除.square类并触发我新定义的changedClass事件。此事件会触发给定的div并添加一个新类或.rectangle。

<强> EXAMPLE

修改：

<强> HTML

<div class="square"></div> <br/> <div class="square"></div> <br/> <div class="square"></div> <br/> <div class="square"></div> <input type="hidden" value="N" />

<强>的jQuery

//When the input is changed, add the rectangle class $("input").on("change", function(e, divEl){ $(divEl).addClass("rectangle"); }); //when a div is clicked, trigger a change event for the input place holder. $(document).on("click", "div", function(){ $("input").trigger("change", [this]); }); //regualr click event for your div $(document).on("click", "div", function(){ $(this).removeClass("square"); });

<强> EXAMPLE

此处还有一个使用按钮的 EXAMPLE 。

Answer 2

有Dom Change事件，但并未得到所有浏览器的广泛支持。我认为最安全的方法是，如果它适合您的用例，就是检查计时器上的类，并在检测到类更改时运行一个函数。

var hasClass = false;

setInterval(function(){
  if($('#selector').hasClass('myClass') != hasClass){
    hasClass = $('#selector').hasClass('myClass')
    // fun your custom function here
  }
},100)

Answer 3

在 2021 年执行此操作的正确（标准轨道）方法是使用 MutationObserver：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

阅读上面的链接，然后当你调用 observer.observe() 时，你传入一组选项作为第二个参数 - 如果你传入 {attributes: true} 作为你的选项，变异观察者将观察所有属性相关元素的变化。由于 class 是一个属性，当一个类被添加到元素中或从元素中删除时，你的变异观察者将触发它的回调 - 只需从回调中检查元素 classList 以过滤你想要的类。

更多关于如何使用 MutationObserver：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/MutationObserver

通过jquery从元素中删除类时触发事件？

3 个答案: