1

我有这个功能，我不确定是不是最好的。它实际上正在工作。我问是因为我在网上找不到任何“复制粘贴”解决方案，所以我写了这个。没有必要建议其他 CSS 解决方案，我被<a href><img>text</a>结构困住了，我无法编写 .css（所有这些都是因为后端编码限制/'他们不知所措：lol '）

javascript（让客户建立自己的图标集[卡在.png]的简单方法）：

$(".list-habiliy").on({
        mouseenter: function(){
            $('img.icone', this).attr("src",$('img.icone', this).attr("src").replace('.png', '-o.png'));
        },
        mouseleave: function(){
            $('img.icone', this).attr("src",$('img.icone', this).attr("src").replace('-o.png', '.png'));
        }
    },"a");

html（列表<a>最多可包含 30 个元素）：

<div class="list-habiliy">
    <a href="some-link1.link"><img class="icone" src="/path/to/default/icons/icon-24px-icon-name1.png" alt="" width="24" height="24" />Some text1</a>
    <a href="some-link2.link"><img class="icone" src="/path/to/default/icons/icon-24px-icon-name2.png" alt="" width="24" height="24" />Some tex2t</a>
    <a href="some-link3.link"><img class="icone" src="/path/to/default/icons/icon-24px-icon-name3.png" alt="" width="24" height="24" />Some text3</a>
    <a href="some-link4.link"><img class="icone" src="/path/to/default/icons/icon-24px-icon-name4.png" alt="" width="24" height="24" />Some text4</a>
</div>

该函数的目标是通过从图像源中添加/删除“-o”文本来替换图标<img>中的图标。我想知道，出于性能原因，我应该使用 .each()、hover() 吗？<a>

jsFiddle：

http://jsfiddle.net/5dpaA/

这是最好的方法吗？

感谢您的所有建议。

【最后】：

由用户 @Xotic750 解释 [接受的答案]（我们使用 event 属性并使用 javascript 直接访问元素，而不是将其包装在 jquery 中，我们也不会执行任何进一步的 jquery 搜索......）

不知何故，这是我能做的唯一优化。

感谢用户@codelio [我不能接受 2 个答案] 缩短了代码编写：

$(".list-habiliy a").on({
    mouseenter: function (e) {
        var elm=e.delegateTarget.firstChild;
        elm.src=elm.src.replace('.png','-o.png');
    },
    mouseleave: function (e) {
        var elm=e.delegateTarget.firstChild;
        elm.src=elm.src.replace('-o.png','.png');
    }
});
4

5 回答 5

1

这是另一种解决方案，使用jquery 事件委托，因此只有 1 个事件处理程序（以及 2，一个 formounseenter和一个 for mouseleave）附加到list-habiliy，如果您有多个这样的结构，那么您可以将其附加到document,body并将选择器更改为list-habiliy a,img. this我们不使用 jquery包装，而是使用event属性并使用 javascript 直接访问元素，我们也不会执行任何进一步的 jquery 搜索，因为我们现在假设您的 html 模式不会偏离您所说的模式。尽管如此，由于它是用户触发的事件，因此很难衡量它的改进，但它应该比仅使用 jquery 的方法更快。

HTML

<div class="list-habiliy">
    <a href="some-link1.link"><img class="icone" src="http://placehold.it/64x64/&text=.png1" alt="" width="64" height="64" />Some text1</a>
    <a href="some-link2.link"><img class="icone" src="http://placehold.it/64x64/&text=.png2" alt="" width="64" height="64" />Some tex2t</a>
    <a href="some-link3.link"><img class="icone" src="http://placehold.it/64x64/&text=.png3" alt="" width="64" height="64" />Some text3</a>
    <a href="some-link4.link"><img class="icone" src="http://placehold.it/64x64/&text=.png4" alt="" width="64" height="64" />Some text4</a>
</div>

Javascript

$(".list-habiliy").on("mouseenter", "a,img", function (evt) {
    var target = evt.target;

    if (target.nodeName === "IMG") {
        target.src = target.src.replace('.png', '-o.png');
    } else {
        target.firstChild.src = target.firstChild.src.replace('.png', '-o.png');
    }
}).on("mouseleave", "a,img", function (evt) {
    var target = evt.target;

    if (target.nodeName === "IMG") {
        target.src = target.src.replace('-o.png', '.png');
    } else {
        target.firstChild.src = target.firstChild.src.replace('-o.png', '.png');
    }
})

在jsfiddle 上

于 2013-05-02T00:17:30.350 回答
1

这将始终找到悬停的孩子，即您的 img，而且速度很快！

$(".list-habiliy a").on({
    mouseenter: function (e) {
        //faster is not possible!
        var elm=e.delegateTarget.firstChild, src=elm.src.replace('.png','-o.png');
        elm.src=src;
    },
    mouseleave: function (e) {
        //same a bit jQuery stylish
        var elm=e.delegateTarget.firstChild, src=elm.src;
        $(elm).attr('src',src.replace('-o.png','.png'));
    }
});

抱歉，有一个更短的。:)

$(".list-habiliy a").on({
    mouseenter: function (e) {
        var elm=e.delegateTarget.firstChild;
        elm.src=elm.src.replace('.png','-o.png');
    },
    mouseleave: function (e) {
        var elm=e.delegateTarget.firstChild;
        elm.src=elm.src.replace('-o.png','.png');
    }
});
于 2013-05-02T01:10:08.873 回答
0

你拥有它的方式完美无缺，我不能说 using.hover()会有任何性能优势并且.each()是不必要的。实际上：

调用 $(selector).hover(handlerInOut) 是以下的简写： $(selector).on("mouseenter mouseleave", handlerInOut);

于 2013-05-01T23:39:42.583 回答
0

我可能会将$('img.icone', this)查询存储在一个变量中，这样它就不会在每个mouseenter/mouseleave函数中执行两个查询。

如果将其剪切/粘贴到其他区域，它还可以提高可读性并减少潜在问题：

$(".list-habiliy").on({
    mouseenter: function () {
        var imgIcon = $('img.icone', this);
        imgIcon.attr("src", imgIcon.attr("src").replace('.png', '-o.png'));
    },
    mouseleave: function () {
        var imgIcon = $('img.icone', this);
        imgIcon.attr("src", imgIcon.attr("src").replace('-o.png', '.png'));
    }
}, "a");

JS 小提琴演示：http: //jsfiddle.net/5dpaA/3/

于 2013-05-01T23:54:54.557 回答
0

悬停是这样实现的（如此处所示）：

hover: function( fnOver, fnOut ) {
    return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
}

所以这里没有表现。避免委托会创建很多处理程序。

您实际上可以做的是在您的 html 末尾添加类似这样的内容：

<div id="hidden-img">
  <img class="icone" src="http://placehold.it/64x64/&text=-o.png1" alt="" width="64" height="64" />
  <img class="icone" src="http://placehold.it/64x64/&text=-o.png2" alt="" width="64" height="64" />
  <img class="icone" src="http://placehold.it/64x64/&text=-o.png3" alt="" width="64" height="64" />
  <img class="icone" src="http://placehold.it/64x64/&text=-o.png4" alt="" width="64" height="64" />
</div>

并添加一些 CSS：

#hidden-img {
    margin-left: -9999px;
}

我认为如果它们被隐藏，Opera 就不会加载图像。

于 2013-05-01T23:59:34.383 回答