Question

假设我看不到下面的代码，我不知道超时设置了多长时间，并且我无法更改原始代码

document.querySelector('button').addEventListener('click', function(){ 
  setTimeout(function(){ 
    document.querySelector('.old').classList = 'old new';

}, 100);
});

<div class="old">OLD</div>
<button>Click</button>

我想要实现的是，一旦添加了new类，然后我想更改TEXT行，如下所示的hack代码

document.querySelector('button').addEventListener('click', function(){ 
  setTimeout(function(){ 
    document.querySelector('.old').classList = 'old new';

}, 100);
});

document.querySelector('button').addEventListener('click', function(){ 
   if(document.querySelectorAll('.new').length !== 0) {
       document.querySelector('.old').innerText = "123"
   }
});

<div class="old">OLD</div>
<button>Click</button>

document.querySelector('button').addEventListener('click', function(){ 
     if(document.querySelectorAll('.new').length !== 0) {
        document.querySelector('.old').innerText = "123"
     }
  });

由于我无法知道超时秒数，因此我的第一次单击将立即执行，因此无法使用。因此，我必须将超时秒数增加得比原来的大。有没有一种有效的方法来检测是否添加了new类？或超时是此用例的最佳解决方案？谢谢

Answer 1

您可以为此目的使用Mutation Observer：

document.querySelector('button').addEventListener('click', function() {
  setTimeout(function() {
    document.querySelector('.old').classList = 'old new';

  }, 500);
});

document.querySelector('button').addEventListener('click', function() {
  var observer = new MutationObserver(function(mutationsList, observer) {
    for (var mutation of mutationsList) {
      if (
        mutation.type === 'attributes' &&
        mutation.attributeName === 'class' &&
        mutation.target.classList.contains('new')
      ) {
        mutation.target.innerText = "123";
        observer.disconnect();
      }
    }
  });

  observer.observe(document.querySelector('.old'), {attributes: !0});

});

<div class="old">OLD</div>
<button>Click</button>

Answer 2

使用ClassList API完成此操作。一段时间后将添加新课程。如果没有将新类添加到dom，则无法获取该节点的引用进行比较。 ClassList提供了一种方便的方法来解决此问题。使用contains方法检查是否添加了new类。如果添加了，请更改文本。

使用以下代码

document.querySelector('button').addEventListener('click', function(){ 
 if(document.querySelectorAll('.old')[0].classList.contains("new")) {
   document.querySelector('.old').innerText = "123"
 }
});

Solution

点击

2 个答案: