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

Posted 2023-05-09

【中文标题】用 jquery 替换悬停时的图像：定位问题

【英文标题】：Replace image on hover with jquery: targeting issue

【发布时间】：2015-11-30 09:34:32

【问题描述】：

我一直在努力解决这个问题，因为我对 jquery 还很陌生，而且我知道解决方案正让我眼前一亮。

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

如果您看到我的jsfiddle（我从 wordpress 复制了 html 的摘录），我就有点正确了，但是它使用 :nth-child() 的第一张图片来显示所有图片页。这要么是定位问题（顺便说一下，图像没有自己的 ID），要么我没有在悬停时为变量（链接、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);
);

);

【参考方案1】：

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

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

【讨论】：

太多重复和来回走 (.replace('_1','_2') 然后替换回来 (_2, _1)...) 而不是存储原始值并重用它悬停时。

此代码适用于对 JQuery/javascript 非常陌生的初学者开发人员。所以让它阅读起来很简单...... :) 不考虑 javascript 引擎的负载或内存泄漏。

Vijay和Zoran，比你好多了！它正在工作，现在看看你如何更改代码对我来说很有意义。我什么都没学到。

我的荣幸马里奥...！

还有一个问题，如果我只想定位特定的 wordpress 页面，因此它不适用于网站上的所有 avia_images，我将如何格式化 var link = $('a.avia_image');。例如，有一个名为“page-id-113”的父类。

【参考方案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;
    );
);

【讨论】：

卓然，感谢优化，不胜感激。我必须给维杰打勾。如果我能把它给你们两个，我会的。

并不意味着如果您对它感到满意就不能投票给我;)