需要 Wordpress 多个特色图像悬停帮助（php/jquery） - 认为我在那里 80%

Question

我想让我的博客文章中的特色标题图像在悬停时更改为替代图像 - 我所有的标题图像都是黑白的，所以我的想法是让它们在悬停时更改为高对比度单调版本...

我遵循this tutorial 的指导，经过几次颠簸之后，我现在处于最后一个障碍，我在主 php 文件的 head 标记中添加一些 javascript 以生成悬停图像过渡.

不幸的是，它什么也没做——我尝试将代码放在其他不同的地方（包括其他主要的 php 文件），但没有成功。由于我的编码知识非常基础，并且只在 html/css 领域内，我真的不确定我还能尝试什么来让这个工作......

不幸的是，我遵循的原始教程中的演示链接已失效，因此我也无法分解任何工作代码！

this is my blog - 我暂时删除了替代图像上的 display:none，只是为了让您更好地了解我想要做什么。以下是有问题的javascript代码：

<script type="text/javascript">
jQuery(document).ready(function() {

//Get the total number of elements having the class "galery"
var getTotalElements = jQuery(".gallery").length;

//Running Loop
for(var i = 1; i <= getTotalElements; i++) {
jQuery('.post'+i).on('hover', createCallback(i) );
jQuery('.post'+i).on('mouseleave', createCallback1(i) );
}

//This method is for hover function
function createCallback( i ){
return function(){
jQuery('.post'+i+' .entry-header .FirstImage'+i).hide();
jQuery('.post'+i+' .entry-header .SecondImage'+i).show();
}
}

//This method is for mouseleave function.
function createCallback1( i ){
return function(){
jQuery('.post'+i+' .entry-header .FirstImage'+i).show();
jQuery('.post'+i+' .entry-header .SecondImage'+i).hide();
}
}

});
</script>

以下是我在内容 php 文件中包含的代码，它调用了两个特色图像：

<a href="<?php the_permalink(); ?>">
<div  class="first_image FirstImage"><?php the_post_thumbnail(); ?></div>
<div class="second_image SecondImage"><?php echo MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'colored-image', get_the_ID()); ?></div>
</a>

Answer 1

首先将脚本修改为类似的内容。

jQuery(function($) {

    $('[class^="post"]').on('mouseenter mouseleave', function(e) {
        var flag = e.type === 'mouseenter';
        $('.entry-header .FirstImage', this).toggle(!flag);
        $('.entry-header .SecondImage', this).toggle(flag);
    });

});

然后你必须在 jQuery 之后实际包含脚本。
现在你在页眉中有脚本，并且在页脚中加载了 jQuery，因此加载脚本时 jQuery 不可用。

在 Wordpress 中，您通常应该将脚本放在一个单独的文件中，并使用 wp_enqueue_script 将其排入队列

应该注意，像这样的直接交换也可能只使用 CSS 来完成

.post:hover .entry-header .FirstImage {
    display: none;
}

.post:hover .entry-header .SecondImage {
    display: inline;
}