Question

我想在下面创建一个带有缩略图的产品展示案例。单击缩略图图像，产品图像将能够使用相同的URL交换到所选图像。我可以知道如何为这个函数编写脚本吗？

$('.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

您的代码中存在错误。我还包括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);
});

Answer 2

Dunno，如果你仍然没有想到这个，但是：

$('.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至.click（或.on('click')）和

$('.magnify.small').find('img')至$('.magnify.small')，因为$('.magnify.small')已经是图片。

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

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

希望有所帮助

＆＃13;

$('.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);
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

2 个答案: