用jquery替换悬停图像:目标问题

用jquery替换悬停图像:目标问题,jquery,wordpress,image,jquery-hover,Jquery,Wordpress,Image,Jquery Hover,我对jquery还比较陌生,所以一直在努力解决这个问题,我知道解决方案就在眼前 我在wordpress中有一个插件,可以为我呈现jquery,并且它可以工作,所以没有问题。有一个wordpress页面有图像缩略图,悬停时,图像将被替换为图像的相同颜色版本 如果您看到我的(我从wordpress复制了html的一个摘录),我的理解有些正确,但是它使用:nth-child()的第一个图像作为该页面上的所有图像。这要么是一个目标问题(顺便说一句,图像没有自己的ID),要么就是我没有在悬停时为变量(li

我对jquery还比较陌生,所以一直在努力解决这个问题,我知道解决方案就在眼前

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

如果您看到我的(我从wordpress复制了html的一个摘录),我的理解有些正确,但是它使用:nth-child()的第一个图像作为该页面上的所有图像。这要么是一个目标问题(顺便说一句,图像没有自己的ID),要么就是我没有在悬停时为变量(link、img等)重新分配新值。它一直使用第一个图像细节,您将在我的JSFIDLE中看到这一点

多谢各位

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

}))

我已经更新了小提琴。请看一看


这是可行的,经过测试,我认为这是最佳的代码(没有相同的代码两次)


太多的重复和反复(.replace(“'u 1','u 2'),然后replace back('u 2,'u 1)…),而不是存储原始值并在悬停时重用它。此代码适用于对JQuery/JavaScript非常陌生的初学者开发人员。所以让阅读变得简单…:)不考虑javascript引擎上的负载或内存泄漏。Vijay和Zoran,比你好多了!它正在运行,看看你是如何更改代码的,现在对我来说很有意义。我没学到什么。我的荣幸马里奥。。。!还有一个问题,如果我只想针对一个特定的wordpress页面,这样它就不会应用于网站上的所有avia_图像,我将如何格式化
var link=$('a.avia_图像')。例如,有一个名为“page-id-113”的父类。Zoran,感谢您的优化,我很感激。我必须给维杰正确的答案。如果我能把它给你们两个,我会的。但这并不意味着如果你们对它感到满意,你们就不能胜过我;)
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);
    });
});
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;
    });
});