javascript - 单击另一个缩略图更改图像

Question

我需要将点击后的图片更改为另一张图片。

在我关于 jsfiddle 的示例中它有效

但在我的 Wordpress 网站上，它不起作用，我也不知道为什么。单击事件不起作用，但如果我添加 alert('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。删除它，它将开始工作(由于 opacity 点击不起作用)。

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