1

私はこの機能を持っていますが、それが最高かどうかはわかりません。それは実際に働いています。ネット上で「コピー＆ペースト」の解決策が見つからなかったので質問しているので、これを書きました。他のCSSソリューションを提案する必要はありません.私は<a href><img>text</a>構造に行き詰まっており、.cssを書くことができません.

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 による説明 [受け入れられた回答] (これを jquery でラップする代わりに、event 属性を使用し、javascript を使用して要素に直接アクセスします。また、それ以上の 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

これは常にあなたの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 に答える
1

これは別の解決策であり、jquery イベント委任を使用するため、1 つのイベント ハンドラー (2 つ、1 つと 1mounseenterつmouseleave)のみが にアタッチされます。list-habiliyそのような構造が複数ある場合は、それを にアタッチしてdocument,bodyセレクターを に変更できますlist-habiliy a,img。thisjqueryでラップする代わりに、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 に答える
0

各/関数$('img.icone', this)内で 2 つのクエリを実行しないように、おそらくクエリを変数に格納します。mouseentermouseleave

また、読みやすさが向上し、これを他の領域にカット アンド ペーストした場合の潜在的な問題が軽減されます。

$(".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 Fiddle デモ: 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 に答える
0

.hover()あなたが持っている方法は完全に機能します.使用するとパフォーマンスが向上し、.each()不要になるとは言えません. 実際には：

$(selector).hover(handlerInOut) の呼び出しは、次の省略形です: $(selector).on("mouseenter mouseleave", handlerInOut);

于 2013-05-01T23:39:42.583 に答える