我试图添加一个类命名为按与类命名为w元素。当用户单击包含类w的元素时，就会发生这种情况。然后我想删除类按后延迟100。这就是我写的代码。
(简而言之:我试图通过添加(然后在100ms后删除)一个CSS类按来添加js动画。)
但是这不起作用，它的行为如下:
- 当我取消注释
setTimeout(foo(this.innerText), 100);时，即使document.querySelector("."+this.innerText).classList.add("pressed");也不会被执行。
document.querySelector('.w').addEventListener("click",function () {
document.querySelector("."+this.innerText).classList.add("pressed");
// setTimeout(foo(this.innerText), 100);
});
function foo(stringclass) {
document.querySelector("."+stringclass).classList.remove("pressed");
console.log(stringclass);
}
有谁能帮我一下吗?HTML代码
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Drum Kit</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
</head>
<body>
<h1 id="title">Drum 🥁 Kit</h1>
<div class="set">
<button class="w drum">w</button>
</div>
<script src="index.js" charset="utf-8"></script>
</body>
</html>
.pressed {
box-shadow: 0 15px 40px 0 #DBEDF3;
opacity: 0.5;
}
setTimeout(foo(this.innerText), 100);立即执行foo。你需要传递函数本身。我相信你想要更接近document.querySelector('.w').addEventListener("click",function (e) { document.querySelector("."+e.target.innerText).classList.add("pressed"); setTimeout(function() {foo(e.target.innerText)}, 100); });