Question

我试图用图像交换颜色样本，然后单击缩略图更改主图像并添加url surce，主图像下移到缩略图列表中，我想添加主URL。

问题是：如何将主网址移动到点击的缩略图？

下面是我的代码，用于在缩略图和主图像之间交换图像，并添加每个缩略图所具有的网址源。

HTML：

<div class="bottlesWrapper">
  <a href="product0.html">
  <img class="MainImage" src="http://placehold.it/300x160/cf5" />
  </a>
</div>

<div class="thumbs">
   <img data-url="product1.html" src="http://placehold.it/300x160/444" />
   <img data-url="product2.html" src="http://placehold.it/300x160/f1f" />
</div>

<div class="bottlesWrapper">
  <a href="product01.html">
  <img class="MainImage" src="http://placehold.it/300x160/cf5" />
  </a>
</div>

<div class="thumbs">
   <img data-url="product02.html" src="http://placehold.it/300x160/444" />
   <img data-url="product03.html" src="http://placehold.it/300x160/f1f" />
</div>

Jquery的：

jQuery(document).ready(function(){
            jQuery(".thumbs img").click(function(){
                            var thmb = this;
                            var src  = this.src;                    
                jQuery(thmb).parent('.thumbs').prev('.bottlesWrapper').find('img').fadeOut(400,function(){
                    thmb.src = this.src;
                    jQuery(this).fadeIn(400)[0].src = src;
                });
                jQuery(this).parent().prev().find('a').attr("href", jQuery(this).attr("data-url"));
            });
});

Answer 1

我认为它会起作用。

jQuery(document).ready(function(){
        jQuery(".thumbs img").click(function(){
                        var thmb = this;
                        var src  = this.src;                    
            jQuery(thmb).parent('.thumbs').prev('.bottlesWrapper').find('img').fadeOut(400,function(){
                thmb.src = this.src;
                jQuery(this).fadeIn(400)[0].src = src;
    jQuery(this).parent('a').attr("href", $(thmb).attr("data-url"));
            });

        }); 
  })

将url源添加到单击的缩略图jquery

1 个答案: