使用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从图像的无序列表（颜色）更改图像

回答

相关问题