假设我看不到下面的代码,我不知道超时设置了多长时间,我也无法更改原始代码
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
类?
或者超时是这个用例的最佳解决方案?谢谢
最佳答案
您可能会使用 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>
关于javascript - 单击后检查类/元素状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53385538/