我正在尝试制作一个程序，当您单击灯时，灯泡会打开，然后如果您再次单击它，它将关闭。我有 onClick 但无论我点击哪个，第一个总是打开。有人可以帮忙让点击的灯亮起来吗？
<!DOCTYPE html>
<html>
<body>
<img id="light1" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<img id="light2" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<img id="light3" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<img id="light4" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180">
<script>
function changeImage() {
var image1 = document.getElementById('light1');
if (image1.src.match("bulbon")) {
image1.src = "pic_bulboff.gif";
} else {
image1.src = "pic_bulbon.gif";
}
}
</script>
</body>
</html>
最佳答案
在 JavaScript 中，事件处理程序获取一个名为 this 的特殊变量，它指的是触发事件的元素(在本例中为单击的灯泡) )，你可以像这样使用它:
function changeImage() {
if (this.src.match("bulbon")) {
this.src = "pic_bulboff.gif";
} else {
this.src = "pic_bulbon.gif";
}
}
请注意与您的代码的差异。您总是对第一个灯泡进行更改，通过 id 使用 API document.getElementById('light1') 进行访问。
关于javascript - 打开和关闭灯，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33743766/