使用onClick從圖像的無序列表（顏色）更改圖像

這是我的第一個問題，所以我希望我儘可能清楚。使用onClick從圖像的無序列表（顏色）更改圖像

我正在創建一個產品頁面，並有一個圖像的無序列表，用於表示產品進入的各種顏色。當我點擊其中一種顏色時，我希望產品圖像更新以顯示該產品顏色。

我實現使用this link.

下面的代碼一些基本的功能我至今 -

function changeImage() { 
 
    if(document.getElementById('classic400').src == 'http://i.imgur.com/DxkuRlE.jpg') { 
 
     document.getElementById('classic400').src = 'http://i.imgur.com/02UH7UA.jpg'; 
 
    }else { 
 
     //Not sure 
 
    } 
 
}

.colours { 
 
    background-color: #f5f5f5; 
 
} 
 

 
ul { 
 
\t list-style: none; 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
li img { 
 
\t height: 50px; 
 
    border-radius: 25px; 
 
}

<div class="colours"> 
 
    <ul> 
 
      <li><img src="http://i.imgur.com/doLMeIi.jpg"></li> 
 
      <li><img src="http://i.imgur.com/ZQdTrml.jpg" onClick="changeImage()"></li> 
 
      <li><img src="http://i.imgur.com/PeidQGD.jpg"></li> 
 
      <li><img src="http://i.imgur.com/GcGpWy5.jpg"></li> 
 
      <li><img src="http://i.imgur.com/AWCzo9N.jpg"></li> 
 
      <li><img src="http://i.imgur.com/yTeF0qu.jpg"></li> 
 
      <li><img src="http://i.imgur.com/i35OBvT.jpg"></li> 
 
    </ul> 
 
     <ul> 
 
      <li><img src="http://i.imgur.com/LNeGCoB.jpg"></li> 
 
      <li><img src="http://i.imgur.com/IOpBiQ8.jpg"></li> 
 
      <li><img src="http://i.imgur.com/jZmYBY8.jpg"></li> 
 
      <li><img src="http://i.imgur.com/mfpTmrC.jpg"></li> 
 
      <li><img src="http://i.imgur.com/N2FH527.jpg"></li> 
 
      <li><img src="http://i.imgur.com/DbS3cRs.jpg"></li> 
 
      <li><img src="http://i.imgur.com/94D0biy.jpg"></li> 
 
     </ul> 
 
       </div> 
 
       
 
<div class="product"> 
 
    <img id="classic400" src="http://i.imgur.com/DxkuRlE.jpg" height= "400px">  
 
</div>

這讓我可以單擊列表中的第二圖像和更改產品形象。從這一點上，我不知道如何將它納入使用所有其他顏色。

是否繼續編寫if/else語句以使用所有顏色，還是有更好/更簡潔的方法來執行此操作？

我也用上面的代碼創建了一個fiddle來說明我在說什麼。

任何幫助將不勝感激，非常感謝！

來源

2015-10-04 aJaggySnake

你熟悉數組？ – usr2564301

在某種程度上，迄今爲止我的大部分知識都來自Treehouse和Codecademy等來源。你能詳細說明一下嗎？ – aJaggySnake

這是一個完全不同的方法，但我相信提供一個更明確的解決方案：

<!doctype html> 
<html> 
    <head> 
     <title>Test code</title> 
    </head> 

    <body> 

     <div> 
      <img src="http://mlb-s1-p.mlstatic.com/camiseta-personalizada-com-smiles-ideogramas-simbolos-13992-MLB3293421990_102012-O.jpg"> 
      <ul> 
       <li data-src="http://mlb-s1-p.mlstatic.com/camiseta-personalizada-com-smiles-ideogramas-simbolos-13992-MLB3293421990_102012-O.jpg">Yellow</li> 
       <li data-src="http://images.clipartof.com/thumbnails/67235-Royalty-Free-RF-Clipart-Illustration-Of-A-Happy-Blue-Emoticon-Face-Smiley.jpg">Blue</li> 
       <li data-src="http://www.cliparthut.com/clip-arts/169/green-smiley-face-clip-art-169032.png">Green</li> 
      </ul> 
     </div> 

     <script> 

     document.addEventListener("click", function(e) { 
      var target = e.target; 

      // If not one of the `li` items, ignore it 
      if (!target.tagName.toLowerCase() === "li") { 
       return; 
      } 

      // If it doesn't have a data-src, ignore it 
      var newSrc = target.getAttribute("data-src"); 
      if (!newSrc) { 
       return; 
      } 

      // IN this case, we know exactly how the DOM is layed out 
      // and that the parent we want is two levels up. 
      // Looping through this is sometimes a better idea. 
      var parentDiv = target.parentNode.parentNode; 

      var img = parentDiv.getElementsByTagName("img")[0]; 
      console.log(img); 

      img.src = newSrc;   
     }); 

     </script> 
    </body> 
</html>

來源

2015-10-04 21:02:02

我必須等待測試，因爲我在工作，看起來像它的工作，雖然，非常感謝你！ – aJaggySnake

在我看來，這是一個更現代化的解決問題的方法。我寫了它，以便它可以在任何相當現代的JavaScript系統（IE8 +）上運行，並且我相信它可以保持HTML的一致性，同時保留相關信息。 –

我終於開始玩這個了。它的工作原理，但我現在還有其他問題！它的目標是在同一個div中的img src，有沒有一種方法可以在不同的div中定位img src？其次，列表項目上的可點擊區域很小，並且在圖像之外。如何增加尺寸以便用戶可以單擊圖像上的任何位置（列表項）來更改圖像？感謝您的幫助，非常感謝！ – aJaggySnake

使用onClick從圖像的無序列表（顏色）更改圖像

回答

相關問題