Question

我需要在点击时将图像更改为其他图像。

在jsfiddle上的示例中，它可以正常工作

但是在我的Wordpress网站上，它不起作用，我不知道为什么。点击事件不起作用，但如果我添加提醒（＆＃39; 1＆＃39;）（例如）它只能运行一次。

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库。

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

点击另一个缩略图更改图像

2 个答案: