将悬停时的图像替换为 jquery：定位问题

Question

由于我对 jquery 还很陌生，所以我一直在努力解决这个问题，而且我知道解决方案就在眼前。

我在 wordpress 中有一个插件可以为我呈现 jquery，它可以正常工作，所以没有问题。有一个带有图像缩略图的 wordpress 页面，悬停时，图像将被替换为图像的相同颜色版本。

如果你看到我的 jsfiddle（我从 wordpress 中复制了 html 的摘录），我说得有点对了，但它使用了 :nth-child 的第一张图片() 用于该页面上的所有图像。这要么是定位问题（顺便说一句，图像没有自己的 ID），要么我没有在悬停时为变量（link、img 等）重新分配新值。它会继续使用第一张图片的详细信息，您将在我的 jsfiddle 中看到。

谢谢。

jQuery(document).ready(function () {

var link = $('.avia_image'),
    img = link.children('img:nth-child(1)'),
    orig = img.attr('src'),
    over = orig.replace('_1', '_2'); // this replaces the _1 in the filename with _2 for the 'over' variable assignment

link.hover(function () {
    $(this).attr('src', over);
}, function () {
    $(this).attr('src', orig);
});

});

Answer 1

我已经更新了 fiddle。请看一下。

http://jsfiddle.net/p8n5gbsh/5/

jQuery(document).ready(function () {

    var link = $('a.avia_image');
    link.hover(function () {
        var img = $(this).children('img'),
        orig = img.attr('src'),
        over = orig.replace('_1', '_2');
        $(img).attr('src', over);
    }, function () {
        var img = $(this).children('img'),
        over = img.attr('src'),
        orig = over.replace('_2', '_1');
        $(img).attr('src', orig);
    });
});

Answer 2

这个有效，经过测试，我认为它是最佳代码（两次没有相同的代码）。

jQuery(document).ready(function () {    
    var orig = "";   
    var img;
    var link = $('a.avia_image');
    link.hover(function () {        
        img = $(this).find("img");
        //img = link.children('img:nth-child(1)'),
        orig = img.attr('src');
        var over = orig.replace('_1', '_2'); // this replaces the _1 in the filename with _2 for the 'over' variable assignment        
        img.attr('src', over);
        console.log(over);
    }, function () {
        img.attr('src', orig);
        console.log(orig);
        //link.unbind;
    });
});

将悬停时的图像替换为 jquery：定位问题

Replace image on hover with jquery: targeting issue

jquery

wordpress

image

jquery-hover