Question

是否可以使用JQuery将更改绑定到元素的样式？

这是我的代码：

＆＃13;

$(".bnotify").on("change",$(".bnotify").css("display"),function(){
alert("changed");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bnotify" style="width:20px;height:20px;background:red"></div>
<input type="submit" onclick="$('.bnotify').toggle()">

＆＃13;

那么有没有办法在.bnotify的显示变化上显示警告？

非常感谢您将宝贵的时间花在我的问题上。

非常感谢您的帮助。

Answer 1

不，你不能。问题是$('.selector').css(<propName>)会返回一个字符串，它不能与事实绑定，它应该与样式属性相关。如果您确实想要观察某个DOM节点中的更改，可以使用MutationObserver，但不要忘记过滤突变，因为这可能会影响应用程序的性能。如果您只有一个回调，这可能会影响某个DOM节点，那么您可以选择一种简化的方法，只需创建类似通知回调工厂的内容：

var createNotificationCb = function(cb, message) {
   return function() {cb.apply(this, arguments);
   alert(message)};
};

Answer 2

jQuery或java脚本中没有内置的样式更改事件支持。但是jQuery支持创建自定义事件并监听它，但每次有变化时，你应该有办法自己触发它。所以它不是一个完整的解决方案。 参考： https://stackoverflow.com/a/2158004/1715121

＆＃13;

   
$('.bnotify').bind("style-change", function(){
    alert("changed");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bnotify" style="width:20px;height:20px;background:red"></div>
<input type="submit" onclick="$('.bnotify').toggle(); $('.bnotify').trigger('style-change')">

＆＃13;

Answer 3

普通方法：

＆＃13;

$('#mybutton').click(function(){
$(".bnotify").toggle();
alert("changed");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bnotify" style="width:20px;height:20px;background:red"></div>
<input type="submit" id="mybutton">

＆＃13;

切换完成后触发：

＆＃13;

toggleDone = function(type){
  alert("changed")
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bnotify" style="width:20px;height:20px;background:red"></div>
<input type="submit" onclick="$('.bnotify').toggle(toggleDone())">

＆＃13;

JQuery绑定样式更改

3 个答案: