如何在 jQuery 中绑定 classChange？

Question

如何在 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');
    } 
}

Answer 1

不存在“班级变更”事件。在现代浏览器上，您可以使用突变观察器来监视class元素上属性（包括 ）的更改，并对这些更改做出响应。在稍旧的浏览器上，您可以使用一个库来模拟突变观察者与旧的、已弃用的突变事件。（只需搜索“突变观察者仿真”。）在比这更旧的浏览器上，您必须进行轮询。

// Watch for changes
var ob = new MutationObserver(function() {
  // The class *may* have changed, handle it
});
ob.observe($("#sidebar")[0], {
  attributes: true
});

这是一个突变观察者的例子：

// 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;
}