2

私はこの関数を見るのに時間がかかりすぎて、それを行うためのきれいな方法を見つけようとして行き詰まったと思います.

これは、 CSS クラスdivを持つものにクリック イベントを追加する jQuery 関数です。clickそれdiv.clickをクリックすると、ユーザーは最初に見つかったリンクにリダイレクトされます。

function clickabledivs() {
    $('.click').each(
        function (intIndex) {
            $(this).bind("click", function(){
                window.location = $( "#"+$(this).attr('id')+" a:first-child" ).attr('href');
            });
        }
    );
}

コードは単純に機能しますが、それを達成するためのかなり良い方法、特に私が使用しているセレクターがあると確信しています$( "#"+$(this).attr('id')+" a:first-child" )。すべてが長くゆっくりと見えます。何か案は？

詳細が必要な場合はお知らせください。

PS: ここの Project2k.de から、いくつかの本当に素晴らしい jQuery ベンチマーク リファレンスを見つけました: http://blog.projekt2k.de/2010/01/benchmarking-jquery-1-4/

4

4 に答える 4

6

これらの要素の数に応じdiv.clickて、イベント委任を使用してこれらのクリックを処理することができます。clickこれは、クラスを持つすべての div に対して単一のイベント ハンドラーを使用することを意味します。次に、そのイベント ハンドラー内で、イベントの発生元に基づいてコールバックが動作しますdiv.click。このような：

$('#div-click-parent').click(function (event)
{
    var $target = $(event.target); // the element that fired the original click event
    if ($target.is('div.click'))
    {
        window.location.href = $target.find('a').attr('href');
    }
});

イベント ハンドラーが少ないほど、スケーリングが向上div.clickします。要素が増えても、イベント処理が遅くなることはありません。

于 2010-04-15T15:44:16.400 に答える
5

jQuery 1.7+ による委任の最適化

$('#div-click-parent').on('click', 'div.click', function () {
   window.location.href = $(this).find('a').attr('href');
});
于 2012-07-12T09:43:25.940 に答える
2

すべてのクリックをロード時にバインドする代わりに、クリック時にバインドしないのはなぜですか? はるかに最適化する必要があります。

$(document).ready(function() {
   $('.click').click(function() {
        window.location = $(this).children('a:first').attr('href');
        return false;
    });
});
于 2010-04-15T15:33:37.857 に答える
0

私はおそらく次のようなことをするでしょう。

$('.click').click(function(e){
  window.location.href = $(this).find('a').attr('href');
});
于 2010-04-15T15:33:45.037 に答える