Javascript Wordpress需要多功能图像悬停帮助（php/jquery）-我想我已经80%做到了

我想让我的博客帖子中的标题图片在悬停时变为可选图片-我所有的标题图片都是黑白的，所以我的想法是在悬停时将它们变为高对比度的单调版本

我遵循了的指导，经过几次颠簸之后，我现在到了最后一个关口，在主php文件的head标记中添加一些javascript，以生成悬停图像转换

不幸的是，它完全没有任何作用——我尝试过将代码放在其他地方，包括其他主要php文件，但没有成功。由于我的编码知识非常基础，而且仅限于html/css领域，我真的不确定还有什么其他方法可以让它工作

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

-我暂时删除了替代图像上的显示：无，只是为了让您更好地了解我正在尝试做什么。下面是有问题的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>

---

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

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中，您通常应该将脚本放在一个单独的文件中，并使用

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

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

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

---

哦，我的日子！我一整天都在尝试破解jQuery——只要输入你的css代码，它就会起作用！非常感谢。当我悬停的时候，其他的帖子标题出现了问题，但我想这只是因为我还没有将其他版本上传到它们身上……我看了看，第二张图片不见了，所以它们对我来说就消失了。我并没有真正测试CSS，但你应该能够调整选择器，添加一个类等。如果你需要更具体。是的，所有其他标题图像都消失在我的悬停。我想这可能是因为我没有上传更多的备选方案，但我只是上传了第二篇文章的备选方案——游吟诗人的形象，它仍然在消失……啊，伙计！好吧，至少我现在知道这是可能的CSS…好吧，修复！这是我的错误-我选择了第二个替代图像使用一个旧插件，我正在尝试今天早些时候！使用正确的选项选择它，它可以工作。非常感谢你的帮助，这让浪费的一天好了一点。