如何在jQuery中绑定classChange?
我需要在一个班级更改时,更改另一班级。
我具有此功能,但是此功能只能在网站加载时运行一次。
我需要做一个事件监听器。有人能帮我吗?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
function switchClass() {
if($("#sidebar").hasClass('pin-top')){
$('#sidebar').removeClass('s2');
}
else if($("#sidebar").hasClass('pinned')) {
$('#sidebar').addClass('s2');
}
}
最佳答案
没有“班级变更”事件。在现代浏览器上,您可以使用mutation observers来监视元素上的属性(包括class
)的更改,并对其进行响应。在稍旧的浏览器上,您可以使用一个库,该库使用过时的,过时的突变事件来模拟突变观察者。 (只需搜索“变异观察者仿真”。)在比该版本更旧的浏览器上,您必须进行轮询。
// Watch for changes
var ob = new MutationObserver(function() {
// The class *may* have changed, handle it
});
ob.observe($("#sidebar")[0], {
attributes: true
});
这是一个变异观察者示例:
// Once a second, add or remove the 'foo' class, Just so we have
// something to respond to. Stop after 10.
var counter = 0;
var timer = setInterval(function() {
$("#sidebar").toggleClass("foo");
if (++counter >= 10) {
$("<p>Done</p>").appendTo(document.body);
clearInterval(timer);
}
}, 1000);
// Watch for changes
var ob = new MutationObserver(function() {
$("<p>").html("It " + ($("#sidebar").hasClass("foo") ? "does" : "does not") + " have the foo class").appendTo(document.body);
});
ob.observe($("#sidebar")[0], {
attributes: true
});
.foo {
color: blue;
}
<div id="sidebar">I'm the 'sidebar' element</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
关于javascript - 如何在jQuery中绑定(bind)classChange?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29892686/