按另一个缩略图更改图片

Question

我需要改变图片点击另一个图像。

在我关于小提琴的例子中，它可以工作

但是在我的Wordpress网站上，它不起作用，我也不知道为什么。单击事件不起作用，但是如果我添加警报(‘1’)(例如)，它只工作一次。

jQuery('.thumbnails img').click(function() {
    var attr = jQuery(this).attr('src');
    var src = jQuery('.main-image img').attr('src');
    jQuery('.main-image img').attr('src', attr);
    jQuery(this).attr('src', src);
});

<div class="images">
  <div class="main-image">
    <img src="https://www.w3schools.com/css/img_fjords.jpg">
  </div>
  <div class="thumbnails columns-3" style="display: block;">
    <img width="184" height="123" src="https://s3-us-west-1.amazonaws.com/powr/defaults/image-slider2.jpg" class="attachment-shop_thumbnail size-shop_thumbnail">
  </div>
</div>

我的错误在哪里？

谢谢

Answer 1

1.要么将代码包装在jQuery(document).ready(function(){..})中，如下所示：-

jQuery(document).ready(function(){
  jQuery('.thumbnails img').click(function() {
    var attr = jQuery(this).attr('src');
    var src = jQuery('.main-image img').attr('src');
    jQuery('.main-image img').attr('src', attr);
    jQuery(this).attr('src', src);
  });
});

或者将您的代码放入您的WordPress页脚。

2.还通过查看您的网站，我看到您的main-image父div有样式opacity:1.remove，并且它将开始工作(由于opacity单击不起作用)。

注意：-确保添加了jQuery库。

Answer 2

用户SetTimeOut可能会对您有所帮助。

jQuery(document).ready(function(){
  setTimeout(function(){ jQuery('.thumbnails img').click(function() {
    var attr = jQuery(this).attr('src');
    var src = jQuery('.main-image img').attr('src');
    jQuery('.main-image img').attr('src', attr);
    jQuery(this).attr('src', src);
  });},0)
});