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

如何在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/