总是用Jquery检查hasClass？

Question

所以我想检查是否有条件〜类和addClass如果满足条件〜否则removeClass。

我能够让这个工作，但只能在初始负载，所以这不会继续检查hasClass条件是否更改。另外，我的removeClass也不起作用。

$(document).ready(function() {
    if ($('.tabs-panel').hasClass('is-active')) {
        $('.tabs-panel.is-active').addClass('HATEYOU')
    }else {
        $('.tabs-panel.is-active').removeClass('HATEYOU')
    }
});

如何设置此项以不断检查是否符合hasClass条件？

Answer 1

轮询

蛮力方法只是检查一个间隔。这样做很简单，虽然它有点浪费CPU并且它在行动之前有一点延迟（取决于间隔长度）。

// for testing:
$('.tabs-panel').on('click', function() {
  $(this).toggleClass('is-active')
});

// poll for changes:
var someReasonableInterval = 300;
window.setInterval(function() {
  // correcting the logic error in your original function while we're here
  $('.tabs-panel')
    .removeClass('HATEYOU')   // will have no effect if the element doesn't already have it
    .filter('.is-active')     // remove the elements without this class from the collection
    .addClass('HATEYOU');     // add the class to the remaining elements in the collection
},someReasonableInterval);

.is-active {border: 1px solid}
.HATEYOU {background-color:#F00}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs-panel">click</div>

突变观察者

或者只是为了好玩这里是一个变异观察者（IE10或以下不支持）：

// for testing:
$('.tabs-panel').on('click', function() {
  $(this).toggleClass('is-active')
});

// unholy mixture of jquery and vanilla follows:
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if ($(mutation.target).hasClass('is-active')) {
      $(mutation.target).addClass('HATEYOU')
    } else {
      $(mutation.target).removeClass('HATEYOU')
    }
  });
});
observer.observe(document.querySelector('.tabs-panel'), {attributes:true});

.is-active {border: 1px solid}
.HATEYOU {background-color:#F00}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabs-panel">click</div>

但不要做其中任何一个。

因为你可能不需要它。

删除此脚本并完全删除.HATEYOU类。将其CSS规则放在.tabs-panel.is-active中，它们最终将应用于您尝试设置的相同元素.HATEYOU on。您的其他代码中依赖于HATEYOU类的任何逻辑都可以依赖于.tabs-panel.is-active。不需要轮询，突变或类名操作。