基於點擊鏈接更改圖片

我試圖在有人點擊鏈接時更改圖片。到目前爲止，我已經編寫這樣的：基於點擊鏈接更改圖片

<script> 
      function changeImage(e) { 
      var elem, evt = e ? e:event; 
      alert("Event is"+evt.target);//for testing 
      var image = document.getElementById('myImage'); 
      var feat1 = document.getElementById('feat1'); 
      var feat2 = document.getElementById('feat2'); 
      var feat3 = document.getElementById('feat3'); 
      var feat4 = document.getElementById('feat4'); 
      if (evt.target.match(feat1.href)) { 
        image.src = ""; 
       } else { 
        image.src = ""; 
       } 
      } 
</script>

和HTML：

<li><a name="a" href="#1" onclick="changeImage()" id="feat1">a</a></li> 
<li><a name="story" href="#2" onclick="changeImage()" id="feat2">b</a></li> 
<li><a name="rep" href="#3" onclick="changeImage()" id="feat3">c</a></li> 
<li><a name="reg" href="#3" onclick="changeImage()" id="feat4">d</a></li>

的形象不會改變。我正在使用警報進行測試。我對JavaScript有點新，所以我該如何解決這個問題？

來源

2016-01-30 user2726634

傳遞當前點擊鏈接的基準爲onclick處理程序：
HTML的一部分：

<li><a name="a" href="#1" onclick="changeImage(this)" id="feat1">a</a></li> 
<li><a name="story" href="#2" onclick="changeImage(this)" id="feat2">b</a></li> 
<li><a name="rep" href="#3" onclick="changeImage(this)" id="feat3">c</a></li> 
<li><a name="reg" href="#3" onclick="changeImage(this)" id="feat4">d</a></li>

優化您的JS部分，如下圖所示：

<script> 
      function changeImage(e) { 
      var elem = e.currentTarget, 
       id = elem.id, 
       href = elem.href; 

       if (<your_condition>) { // exemplary code 
        image.src = ""; 
       } else { 
        image.src = ""; 
       } 
      } 
</script>

來源

2016-01-30 21:07:58 RomanPerekhrest

首先，你知道，在你的例子，最後兩個超鏈接有相同的名稱和href值，對吧？

接下來，作爲內聯事件處理程序的onclick從未標準化，並且被認爲是不良形式。而是使用DOM標準，使用addEventListener（）如下：

<body> 

    <li><a name="a" href="#1" id="feat1">a</a></li> 
    <li><a name="story" href="#2" id="feat2">b</a></li> 
    <li><a name="rep" href="#3" id="feat3">c</a></li> 
    <li><a name="reg" href="#4" id="feat4">d</a></li> 

    <img id="myImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/NASA_logo.svg/2000px-NASA_logo.svg.png" height="200"> 

<script> 

    (function(){ 

     var theAnchors = document.querySelectorAll("a[id^='feat']"); 
     for(var i = 0; i < theAnchors.length; ++i) { 
      theAnchors[i].addEventListener("click", function(){ 
       changeImage(this); 
      }); 
     } 

     function changeImage(targetAnchor) { 
      var image = document.getElementById('myImage'); 
      var href = targetAnchor.href; 

      if (href.indexOf("#3") > -1) { 
       image.src = "http://www.nasa.gov/centers/jpl/images/content/650602main_pia15415-43.jpg"; 
      } else { 
      alert("else"); 
       image.src = "http://www.nasa.gov/centers/goddard/images/content/280046main_CassAcomposite_HI.jpg"; 
      } 
     } 

    ()); // IIFE 

</script> 
</body>

在下面的jsfiddle，點擊A，B或d將導致第一圖像消失和到來了更換，但是當你點擊C，一個不同的圖像出現。請耐心等待，這些都是高分辨率圖像，需要幾秒鐘才能加載。

查看一個工作示例：https://jsfiddle.net/adspxoc5/5/

來源

2016-01-30 21:57:08

謝謝先生。其實我在粘貼之前稍微編輯了一下，我忘了在複製粘貼時刪除href值。 – user2726634

基於點擊鏈接更改圖片

回答

相關問題