Question

我现在正在Wordpress的一个画廊工作，我有点卡住了。

想法是在悬停时更改帖子缩略图。替换图像将来自高级自定义字段插件生成的字段。

现在，我已设法将这两个网址拉入并存储在变量中，但我仍然无法工作。它适用于独立的CodePen，但不适用于Wordpress网站本身。

Wordpress代码：

jQuery(document).ready(function() { 

var firstthumb = '<?php echo the_post_thumbnail_url(); ?>';
var secondthumb = '<?php if( get_field('multiple_thumbs') ): ?><?php echo the_field('multiple_thumbs'); ?><?php endif; ?>';

jQuery('.member-thumbnail').hover(function() {
jQuery('.attachment-thumbnail').attr('src', secondthumb);
}, function() {
jQuery('.attachment-thumbnail').attr('src', firstthumb);
    });
});

然后它返回：

jQuery(document).ready(function() {

  var firstthumb = 'http://www.cozeh.com/wp2/wp-content/uploads/2016/01/pic2.png';
  var secondthumb = 'http://www.cozeh.com/wp2/wp-content/uploads/2016/01/multiple2.png';

  jQuery('.member-thumbnail').hover(function() {

    jQuery('.attachment-thumbnail').attr("src", secondthumb);
  }, function() {
    jQuery('.attachment-thumbnail').attr("src", firstthumb);
  });
});

这是beta version的链接。这里是codepen。

对于为什么这不起作用或者您有任何替代解决方案的任何解释表示感谢。

编辑：更新代码

Answer 1

问题是，在codepen中，您没有将img包装在a标记中，而是在WordPress网站上执行此操作。因此，要使它在wordpress中工作，您需要删除包装图像的链接或更改jQuery代码，替换此代码：

jQuery('.member-thumbnail').hover(function() {
...
});

对此：

jQuery('.member-thumbnail a').hover(function() { 
...
});

Answer 2

标记为已解决。

事实证明，它毕竟不是一个脚本问题。

WP 4.4。+正在将srcset附加到图片上，作为他们移动的一部分，以使所有图片响应。 img src正在发生变化，但不是srcset因此问题。

现在找到一种解决方法来禁用响应式图像。

我编辑了代码，因此它只影响其中一个缩略图，而不是每一个缩略图。

<?php if ( has_post_thumbnail() ) { ?>

    <div class="member-<?php the_ID(); ?>-thumbnail">
        <a href="#" data-toggle="modal" data-target="#post-<?php the_ID(); ?>"><?php the_post_thumbnail('thumbnail'); ?></a>
    </div>

<script type="text/javascript">

jQuery(document).ready(function() {

    var firstthumb = '<?php the_post_thumbnail_url(); ?>';
    var secondthumb = '<?php if( get_field('multiple_thumbs') ): ?><?php echo the_field('multiple_thumbs'); ?><?php endif; ?>';

    jQuery('.member-<?php the_ID(); ?>-thumbnail').hover(function() {
    jQuery('.member-<?php the_ID(); ?>-thumbnail .attachment-thumbnail').attr('src', secondthumb);
    }, function() {
    jQuery('.member-<?php the_ID(); ?>-thumbnail .attachment-thumbnail').attr('src', firstthumb);
    });
});

</script>

感谢所有人的投入。

（WP）代码在独立的codepen中工作，但不在现场工作

2 个答案: