javascript - 如何在 jQuery 中绑定(bind) classChange？

Question

如何在 jQuery 中绑定(bind) classChange？ 我需要在一个类(class)改变时，改变另一个类(class)。

我有这个功能，但是这个功能在网站加载时只运行一次。 我需要做一个事件监听器。有人可以帮助我吗？

<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)变更”事件。在现代浏览器上，您可以使用 mutation observers观察元素属性(包括 class)的变化，并做出响应。在稍微较旧的浏览器上，您可以使用一个库来模拟具有旧的、已弃用的突变事件的突变观察器。 (只需搜索“mutation observer emulation”。)在比这更旧的浏览器上，您必须进行轮询。

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