Javascript - 點擊圖片按鈕更改

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 ）， .src返回整個路徑（ http://www.yourwebsite.com/images/Img/Click_u.svg ）。

因此， if條件永遠不會成立，那么它將永遠不會改變圖像。

也許嘗試一些類似的東西

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

檢查是否可以在較大的字符串src找到代碼段“Click_u.svg”。

或者使用

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 個解決方案

解決方案1
3 2017-02-23 17:24:16

Javascript - 點擊圖片按鈕更改

問題描述

1 個解決方案

解決方案1 3 2017-02-23 17:24:16

解決方案1
3 2017-02-23 17:24:16