用jQuery单击时用缩略图替换主图像 [英] Replace main image with thumbnail on click with jQuery

问题描述

我正在为产品页面创建一个小型产品画廊.它当前有4个缩略图图像和一个主图像.当您单击其中一个缩略图时，我希望将主图像替换为所单击的缩略图.

I am creating a small product gallery for a product page. It currently has 4 thumbnail images and a main image. When you click on one of the thumbnail images, I would like the main image to be replaced by the clicked thumbnail image.

我在这里有一个Codepen.. http://codepen.io/anon/pen/oIzqj

I have a codepen here.. http://codepen.io/anon/pen/oIzqj

我觉得我已经很近了，但显然还没有到那儿.

I feel I am close but obviously not quite there yet.

这是我的jQuery代码...

Here is my jQuery code...

$('.thumbnails .zoom').click(function(e){
  e.preventDefault();

  var photo_fullsize =  $(this).find('img').attr('src');

  $('.woocommerce-main-image img').attr('src',' + photo_fullsize + ');

});

很想知道我在想什么/做错了什么.

Would love to see what I am missing/doing wrong.

谢谢

推荐答案

执行$('.woocommerce-main-image img').attr('src', photo_fullsize);而不是$('.woocommerce-main-image img').attr('src',' + photo_fullsize + ');，它可以工作.参见此处: http://codepen.io/anon/pen/uatGg

Do $('.woocommerce-main-image img').attr('src', photo_fullsize); instead of $('.woocommerce-main-image img').attr('src',' + photo_fullsize + '); and it works. See here: http://codepen.io/anon/pen/uatGg

这篇关于用jQuery单击时用缩略图替换主图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！