应该是交互式的函数，但它只工作一次

Question

我将从代码开始，然后我将解释：

<section>
<div id="flex">
<img id="bulb1" src="images/lightoff.png" onclick="luce(this.id)" />
<img id="bulb2" src="images/lightoff.png" onclick="luce(this.id)" />
<img id="bulb3" src="images/lightoff.png" onclick="luce(this.id)" />
</div>
</section>


function luce(bulb) {
if (bulb == "bulb1") {
var bulbsw = document.getElementById('bulb1');
if(bulbsw.src == "images/lighton.png") {
bulbsw.src = "images/lightoff.png";
} else {
bulbsw.src = "images/lighton.png";
}
}
}

javascript代码在外部文件中，那么不用担心我以这种方式粘贴它以让您阅读它。我有三张图片，它们代表三个灯泡关闭。当我点击灯泡1时，一切都很好，它继续。现在我希望如果我再次单击灯泡 1，它会熄灭，但没有任何反应，为什么？对不起，我是初学者，我正在做练习以提高。谢谢！

Answer 1

如果在本地或从 Web 服务器运行此脚本，则通过查询图像元素的.src属性返回的字符串不仅包含路径和图像。

例如，如果您在d：驱动器上名为bulb的文件夹中本地运行它，它将返回

file:///d:/bulb/images/lightoff.png

这意味着一旦调用 luce 函数，它将直接跳转到 else 块，因为if(bulbsw.src == "images/lighton.png")计算结果为 false。 下次你点击同一个灯泡时，它会再次直接跳到else块中，因为这不可能被评估为true。

您可以通过仅提取文件名 + 扩展名并将其用于比较来解决问题。

function luce(bulb) {
if (bulb == "bulb1") {
var bulbsw = document.getElementById('bulb1');
var bulbImage = bulbsw.src.substring(bulbsw.src.lastIndexOf("/") + 1, bulbsw.src.length);
if (bulbImage == "lighton.png") {
bulbsw.src = "lightoff.png";
} else {
bulbsw.src = "lighton.png";
}
}
}

<section>
<div id="flex">
<img id="bulb1" src="images/lightoff.png" onclick="luce(this.id)" />
<img id="bulb2" src="images/lightoff.png" onclick="luce(this.id)" />
<img id="bulb3" src="images/lightoff.png" onclick="luce(this.id)" />
</div>
</section>