Question

我有这个功能，我不确定是最好的。它实际上是有效的。我问，因为我无法通过网络找到任何“复制粘贴”解决方案，所以我写了这个。没有必要建议其他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>中替换图标<a>。我想知道，我应该使用.each（），hover（）作为性能原因吗？

jsFiddle：

http://jsfiddle.net/5dpaA/

这是最好的方法吗？

感谢您的所有建议。

[Finaly]：

由user @ 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');
    }
});

Answer 1

这是另一个解决方案，使用jquery event delegation，因此只有1个事件处理程序（2个，一个用于mounseenter，一个用于mouseleave）附加到list-habiliy，如果你有多个这样的结构然后你可以将它附加到document,body并将选择器更改为list-habiliy a,img。我们使用this属性并使用javascript直接访问元素，我们也不执行任何进一步的jquery搜索，因为我们现在假设您的html模式没有偏离你说过的。仍然，很难衡量它的改进，因为它是一个用户触发的事件，但它应该比你的jquery只有方法更快。

HTML

event

的Javascript

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

在jsfiddle

上

Answer 2

总会发现这是你的孩子，这是你的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');
    }
});

Answer 3

您拥有它的方式非常完美，我不能说使用.hover()会有任何性能优势，.each()是不必要的。事实上：

调用$（selector）.hover（handlerInOut）是以下的简写： $（selector）.on（“mouseenter mouseleave”，handlerInOut）;

Answer 4

我可能会将$('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/

Answer 5

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

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是隐藏的，不会加载图像。

我可以优化这个jQuery＆＃39;切换＆＃39;图像源功能？

5 个答案: