用选定的缩略图交换产品图像

Question

我想创造一个产品展示案例与一些缩略图以下。单击缩略图图像，产品图像将能够用相同的url交换到选定的图像。我可以知道如何为这个函数编写脚本吗？

https://jsfiddle.net/g989p9a3/9/

$('.magnify .col').onClick(function(){        
  $(".magnify .col").removeClass("active");
  $(this).addClass("active");

  var imgURL = $(this).find('img').attr("src");    
  $('.magnify.small').find('img').attr("src", imgURL);    
});

Answer 1

不知道，如果你还没弄明白，但是：

$('.magnify .col').click(function(){        
    $(".magnify .col").removeClass("active");
    $(this).addClass("active");

    var imgURL = $(this).find('img').attr("src");
    var temp = $('.magnify .small').attr("src");
    $('.magnify .small').attr("src", imgURL);
    $(this).find('img').attr('src', temp);
});

你要改变的就是

.onClick to .click (或.on('click'))和

$('.magnify.small').find('img')到$('.magnify.small')，因为$('.magnify.small')已经是图像了。

你还说了一些关于交换图片的内容，而不仅仅是显示你点击的缩略图，因为这样你最终会失去三个中的一个，所以我补充道：

var temp = $('.magnify .small').attr("src");
$(this).find('img').attr('src', temp);

希望它能帮上忙

​

$('.magnify .col').click(function(){        
    $(".magnify .col").removeClass("active");
    $(this).addClass("active");

    var imgURL = $(this).find('img').attr("src");
    var temp = $('.magnify .small').attr("src");
    $('.magnify .small').attr("src", imgURL);
    $(this).find('img').attr('src', temp);
});

img {
  width: 100px;
}
img.small {
  width: 200px;
}
.col {
  display: inline-block;
  border: 1px solid #000;
}

<div class="col-4 magnify">
  <div class="large"></div>
  <img src="http://www.sonatamusicart.com.my/3rd_mocksite/img/retail/guitar/guitar.jpg" class="img-fluid small">
  <div class="row remove-margin">
    <a href="#" class="col">
      <img src="http://www.sonatamusicart.com.my/3rd_mocksite/img/retail/guitar/guitar-brown.jpg" class="img-fluid">
    </a>
    <a href="#" class="col">
      <img src="http://www.sonatamusicart.com.my/3rd_mocksite/img/retail/guitar/guitar-dark-brown.jpg" class="img-fluid">
    </a>
    <a href="#" class="col">
    </a>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

​

Answer 2

您的代码中有一个错误。我还包括了jQuery。请查看下面的链接。

https://jsfiddle.net/g989p9a3/17/

$('.magnify .col').on('click', function() {
    $(".magnify .col").removeClass("active");
    $(this).addClass("active");

    var imgURL = $(this).find('img').prop("src");
    $('.magnify .small').prop("src", imgURL);
});