2

我有一段代码使用 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");
});
4

3 回答 3

2

您可以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.

例子

编辑：

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

例子

这是另一个使用按钮的示例。

于 2013-01-31T18:20:34.200 回答
0

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

var hasClass = false;

setInterval(function(){
  if($('#selector').hasClass('myClass') != hasClass){
    hasClass = $('#selector').hasClass('myClass')
    // fun your custom function here
  }
},100)
于 2013-01-31T18:12:04.520 回答
0

在 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

于 2021-02-08T01:57:25.967 回答