为什么以下代码没有按预期执行？

Question

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif" width="160" height="120">

<script>
function myFunction()
{
    var img = document.getElementById("image");
    if (img.src == "smiley.gif")

    document.getElementById("image").src="landscape.jpg";
    else
    document.getElementById("image").src="smiley.gif";
}
</script>
<button type="button" onclick = "myFunction()"> click me </button>
<p>The original image was smiley.gif, but the script changed it to landscape.jpg</p>

</body>
</html>

我希望每次用户点击按钮时让HTML页面在两张图片之间切换，但图片永远不会改变。

当我改变了

if (img.src == "smiley.gif")

成

if (img.src.match("smiley.gif"))

然后代码按预期工作。

谁能告诉我原因？

Answer 1

devnull69是对的。 如果将img的源设置为相对路径，则它的src属性仍将返回完整的URL。 您需要完全限定图像的路径或将img.src值剥离到最终组件（文件名）并进行比较。

例如，您可以这样做：

var imgFilename = img.src.substring(img.src.lastIndexOf("/") + 1);
if (imgFilename === "smiley.gif") {
    // Do something.
}

为什么以下代码没有按预期执行？

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-04-10 13:15:33

为什么以下代码没有按预期执行？

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-04-10 13:15:33

解决方案1
2 已采纳 2014-04-10 13:15:33