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 个答案: