Question

这是我从本网站获得的代码，该代码已确认为有效。不适合我。不要介意div标签。

路径很好，它在DW中显示图像，但点击网站上的图像后没有任何反应......

此外，还有代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Behavioral Meta Data -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="Style.css"/>
<title>Untitled Document</title>

</head>

<body>

  <div id="container" class="container">
    <ul id="scene" class="scene border fill">
      <li id="Par_3" class="layer expand-width" data-depth="0.25"><img src="../Img/Par_3.svg" alt="Gallery"></li>
      <li id="Par_2" class="layer expand-width" data-depth="0.20"><img src="../Img/Par_2.svg" alt="Grass_1"></li>
      <li id="Par_25" class="layer expand-width" data-depth="0.20"><img src="../Img/Par_2.5.svg" alt="About me"></li>
      <li id="Par_1" class="layer expand-width" data-depth="0.15"><img src="../Img/Par_1.svg" alt="Grass_2"></li>
      <li id="Par_15" class="layer expand-width" data-depth="0.15"><img src="../Img/Par_1.5.svg" alt="Contact"></li>
      <li id="Par_0" class="layer expand-width" data-depth="0.10"><img src="../Img/Par_0.svg" alt="Rock"></li>
      <li id="Logo" class="layer expand-width"  data-depth="0.05"><img src="../Img/Logo.svg" alt="Logo"></li>
    </ul>

    <img alt="" src="../Img/Click_u.svg" id="cm" onclick="changeImage()"  />

  </div>

  <!-- Scripts -->

  <script language="javascript">
    function changeImage() {

        if (document.getElementById("cm").src == "../Img/Click_u.svg") 
        {
            document.getElementById("cm").src = "../Img/Click_ch.svg";
        }
        else 
        {
            document.getElementById("cm").src = "../Img/Click_u.svg";
        }
    }
</script>

  <script src="Parallax.js"></script>
  <script>

  var scene = document.getElementById('scene');
  var parallax = new Parallax(scene);

  </script>

</body>
</html>

Answer 1

问题是，.src不仅返回相对路径（../Img/Click_u.svg），还返回整个路径（http://www.yourwebsite.com/images/Img/Click_u.svg）。

因此if条件永远不会成立，并且永远不会改变图像。

也许尝试一下

if (document.getElementById("cm").src.indexOf("Click_u.svg") != -1)

检查代码段＆＃34; Click_u.svg＆＃34;可以在较大的字符串src内找到。

或使用

document.getElementById("cm").getAttribute("src")`

它会返回属性的确切值（相对路径）

应该适用于您的案例的代码：

if (document.getElementById("cm").getAttribute("src") == "../Img/Click_u.svg")
{
    document.getElementById("cm").src = "../Img/Click_ch.svg";
}
else 
{
    document.getElementById("cm").src = "../Img/Click_u.svg";
}

出于某种奇怪的原因，在getAttribute方法的末尾似乎存在一个不可见的字符。不知道为什么，但如果您，读者，愿意使用此代码，请重新键入而不是复制粘贴。

这是另一个时间的错误

Javascript - 点击图片按钮更改

1 个答案: