我正在尝试在 JS 上练习一些东西，我想在点击时切换多个 div 以更改它们的颜色，但我似乎无法正确定位第一个。当我按标签名称执行此操作时很好，但按类它似乎不起作用。我究竟做错了什么？谢谢！编辑。这是您更正后我的代码的样子。<body> <div class="container"> <div class="one"> </div> <div class="two"> </div> <div class="three"> </div> <div class="four"> </div> </div> <script src="script.js"></script></body>let boxOne = document.getElementsByClassName("one")[0]boxOne.onclick = function() { alert("Clicked!")}
4 回答
智慧大石
TA贡献1946条经验 获得超3个赞
我要补充一点，如果选择器仅由一个元素使用，最好分配一个 id 并使用 getElementById。
let boxOne = document.getElementById("one");
let allBoxes = document.getElementsByClassName("square");
boxOne.onclick = function() {
alert("Clicked via ID");
}
const arr = [1, 2, 3];
arr.forEach(i => {
allBoxes[i].onclick = function() {
alert("Clicked via Class");
}
})
.square {
width: 100px;
height: 100px;
background: blue;
margin: 20px;
font-size: 50px;
color: white;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
}
<body>
<div class="container">
<div class="square" id="one">
1
</div>
<div class="square" id="two">
2
</div>
<div class="square" id="three">
3
</div>
<div class="square" id="four">
4
</div>
</div>
</body>
PIPIONE
TA贡献1829条经验 获得超9个赞
文档。
getElementsByClassName 返回具有该类名的元素数组（不带点）
querySelector 用于 css 选择器（例如“.one”、“div.one”）
querySelectorAll 像 2. 但返回数组
料青山看我应如是
TA贡献1772条经验 获得超8个赞
let boxOne = document.getElementsByClassName("one")[0]
boxOne.onclick = function() {
alert("Clicked!")
}
div {
width: 100px;
height: 100px;
margin: 30px;
background: blue
}
<body>
<div class="container">
<div class="one">
</div>
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
<script src="script.js"></script>
</body>
扬帆大鱼
TA贡献1799条经验 获得超9个赞
使用此行：document.getElementsByClassName(".one")[0] 您已经针对 div，因此将其更改 boxOne[0].onclick = 为： boxOne.onclick =
添加回答
举报
0/150
提交
取消