Question

我正在使用一个jQuery插件，它将背景 - 深色背景 - 复杂的类添加到文本中以与背景形成对比，并且在滚动到背景时会发生这种变化 - 例如光背景 - 复杂。我需要根据插件添加到文本的类来添加类到叠加id（dover =黑色叠加）（nover = no overlay）（lover = light overlay）。我真的没有jQuery的先进性，我不是要求你去做而不是我，但是你会为我节省很多努力，我会更好地理解它......

jQuery(document).ready(function(){

    if(jQuery( "#globaltext" ).hasClass( "background--dark background--complex" )){
        jQuery( "#overlay" ).addClass( "dover" );
    }else{
        jQuery( "#overlay" ).addClass( "nover" );
    }
});

Answer 1

我有另一个解决方案。你不需要jQuery，只需要javascript就足够了

HTML：

<div id="classList">my Colors</div>

<button onclick="changeClass('red')">red</button>
<button onclick="changeClass('blue')">blue</button>
<button onclick="changeClass('yellow')">yellow</button>

CSS：

.red{
  color:red;
}
.blue{
  color:blue;
}
.yellow{
  color:yellow;
}

for javascript第1部分：创建EventListener

// create custom EventListener for just attribute
function attributeEventListener(target, attr, fun){
  target = document.querySelector(target);

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      // just looking for our attribute
      if (mutation.attributeName == attr){
        fun();
      }
    });    
  });

  // configuration of the observer:
  //just looking for attributes
  var config = {attributes: true};

  // pass in the target node, as well as the observer options
  observer.observe(target, config);
}

第2部分 - 您需要像这样使用它：

new attributeEventListener('#classList','class', function(){
  console.log('changed ...');
});
// first parameter is target (css selector)
// second parameter is attribute name (for your case is class)
// third parameter is your function when event called ...

第3部分 - 改变课程

function changeClass(color){
      var target = document.getElementById('classList');
      if (target.className != color)
        target.className = color; 
    }

在此处查看我的代码：https://codepen.io/miladfm/pen/qmGEgm

MutationObserver文件：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Broswer支持：只是现代浏览器支持mutationobserver

Answer 2

不幸的是，没有changClass的事件，但你可以这样写：

function onChangeClass(elem, callback) {
   var _elem = $(elem);
   var _lastClassName = _elem.attr('class');
   window.setInterval( function() {   
      var _className = _elem.attr('class');
       if (_className !== _lastClassName) {
           callback();   
           _lastClassName = _className;
       }
   },10);

}

然后你可以这样使用它：

onChangeClass("#myElement", function(){
   // your code, when chass changed ...
   alert("event started"); 
});

在此处查看我的代码：https://codepen.io/miladfm/pen/qmMVjY

在jQuery中，如何在dom更改时触发函数？

2 个答案: