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

时间:2018-03-27 04:01:06

标签: jquery

我想在下面创建一个带有缩略图的产品展示案例。单击缩略图图像,产品图像将能够使用相同的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);    
});

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

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

希望有所帮助



$('.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>
&#13;
&#13;
&#13;