Question

我正在尝试使用javascript在我的页面上交换图像，我有几个产品，每个都有拇指，当点击拇指时，主图像被更改。但是......当我添加多个产品时，它会同时改变。他们有单独的id，但它仍在改变两者......这是头部的剧本

  function changeImage(imgName)
  {
     image = document.getElementById('numberone');
     image.src = imgName;
     image = document.getElementById('othertwo');
     image.src = imgName;
 }

HTML

<img src="images/products/vests/classy_clay_beige_vest_front.JPG" alt="beige" width="350" height="400" id="numberone">

和拇指

<div class="thumb1">
     <img src="images/products/vests/classy_clay_beige_vest_front_thumb.JPG" alt="beige" width="80" height="91" onclick="changeImage('images/products/vests/classy_clay_beige_vest_front.JPG')">
</div>
<div class="thumb2">
    <img src="images/products/vests/classy_clay_beige_vest_back_thumb.JPG" alt="navy" width="80" height="91" onclick="changeImage('images/products/vests/classy_clay_beige_vest_back.JPG')">
</div>

Link to website

Answer 1

通过微小的重组，并使用jQuery（你标记了问题），这对你有用：

<img src="images/products/vests/classy_clay_beige_vest_front.JPG" alt="beige" width="350" height="400" id="numberone">

<div class="thumbs">
    <div class="thumb1">
        <img src="images/products/vests/classy_clay_beige_vest_front_thumb.JPG" alt="beige" width="80" height="91" data-large-src="images/products/vests/classy_clay_beige_vest_front.JPG">
    </div>
    <div class="thumb2">
        <img src="images/products/vests/classy_clay_beige_vest_back_thumb.JPG" alt="navy" width="80" height="91" data-large-src="changeImage('images/products/vests/classy_clay_beige_vest_back.JPG">
    </div>
</div>

jQuery(function($) {
    $('div.thumbs img').click(
        function() {
               $('#numberone').attr('src', ($(this).attr('data-large-src'));
        }

    });
});

Answer 2

您的问题是更新图片功能会更新所有产品预览，您需要传递要更新的产品预览的ID，如下所示：

onclick="changeImage("numberone",'images/products/vests/classy_clay_beige_vest_front.JPG')"

并用此替换更新功能。

changeImage(id,url){
    image = document.getElementById(id);
    image.src = url;
}

为了更轻松地添加更多产品，您可以使用一致的类，并使用它们在页面上显示的顺序。这样第一个就是document.getElementsByClassName("thumb-large")[0]，依此类推。然后你将传入引用而不是传入id。

Answer 3

你想要像这样交换一下吗？

请检查此DEMO。

$(".thumb").click(function(){
 var tmp=$(this).find("img").attr("src");
 $("#numberone").attr("src",tmp);
})

Answer 4

如果您编写如下代码，它会更清晰。

 function changeImage(imgName)
  {
     document.getElementById('numberone').src = imgName;
     document.getElementById('othertwo').src = imgName;
 };

您编写的脚本越少越好，以便当.js文件的请求或嵌入了JavaScript的html文件被切断到客户端时，有效负载会更轻。

改变img src javascript

4 个答案: