javascript - 应该是交互式的功能，但它只能运行一次

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

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

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

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

这意味着一旦调用 luce 函数，它就会直接跳转到 else block ，因为 if(bulbsw.src == "images/lighton.png") 的计算结果为 false。下次您单击同一个灯泡时，它将再次直接跳到 else block 中，因为这永远不会评估为 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>