0

最初に言っておきますが、私は決して JavaScript プログラマーでも jQuery の第一人者でもありません。実際には jQuery を始めたばかりです。

次の 2 つの jQuery コードがあります。

$('.tipTrigger').hover(function(){
    $(this).toggleClass('active').prev('.tipText').stop(true, true).fadeToggle('fast'); 
});

と

if ($(".tooltip-container").length > 0){        
    $('.tipTrigger').hover(function(){
        $(this).toggleClass('active').prev('.tipText').stop(true, true).fadeToggle('fast'); 
    });
}

これについて私が持っているいくつかの質問:

  1. 上記の2つのコードの基本的な違いは何ですか?
  2. とはどういう意味if ($(".tooltip-container").length > 0){ですか?
  3. 上記を使用する利点はありifますか？
  4. 開発者の観点から見て、より「効率的」なのは何ですか? （つまり、非常に小さなものが何らかの形でパフォーマンスにかなりの影響を与える場合）

この単純な比較に関する他のコメント/ヘルプは大歓迎です。

前もって感謝します。

4

3 に答える 3

4
  1. ホバー機能は、次の場合にのみ登録されます...
  2. ... クラス「tooltip-container」を持つページに少なくとも 1 つの要素があります。
  3. これらのツールチップが機能する方法に私が知らない隠された魔法がない限り、おそらくわずかなパフォーマンスです。
  4. 速度が低下したりエラーが発生したりしない場合は、一般的に、わずかなパフォーマンスの調整よりもクリーンなコードを好みます。
于 2012-04-27T15:49:30.540 に答える
4

2 つ目は、 class を持つ DOM 要素が 1 つ以上ある場合にのみホバー機能を設定します"tooltip-container"。

どちらも DOM をトラバースして、指定されたクラスを持つ要素を見つけます。効率の違いに価値があるかどうかは、DOM、ステートメントがいつ呼び出されるかなどによって異なります。

于 2012-04-27T15:48:07.840 に答える
1

  • 上記の2つのコードの基本的な違いは何ですか?

    2 つ目は、ページに「tooltip-container」クラスの要素がある場合にのみ、ホバー機能を設定します。

  • if '($(".tooltip-container").length > 0){' の意味は?

    tooltip-containerクラスを持つ要素がドキュメントに存在するかどうかをテストする単純な if ステートメント

  • 上記を使用する利点はありifますか？

    要するに、この場合、クラスを持つ要素がとにかく存在しない限り、.hover は割り当てられないため、そうではありませんtipTrigger。tooltip-containerまた、1 つの要素が存在するかどうかのみを確認するため、パフォーマンスの問題が発生する可能性があります。tipTriggerこれがコンテナーの「内側」にあることを確認するためのチェックである場合、を持つ要素tooltip-containerが 1 つ見つかるとすぐに失敗し、 を持つすべての要素にtipTriggerホバー機能が割り当てられ、これは望ましくない場合があります。

  • 開発者の観点から見て、より「効率的」なのは何ですか? （つまり、非常に小さなものが何らかの形でパフォーマンスにかなりの影響を与える場合）

    tipTrigger要素内の要素のみが起動されることを確認する必要がある場合tooltip-containerは、次のように、jQuery の.each 関数を使用するか、セレクターで CSS を使用することを検討してください。

>

$('.tooltip-container .tipTrigger').hover(function(){
    $(this).toggleClass('active').prev('.tipText').stop(true, true).fadeToggle('fast'); 
});

さらなる理解のために

  • .toggleClass : この要素でアクティブなトグルのクラス
  • .prevtipText : DOM内の現在の要素の前にあるクラスを持つ要素を参照するようにチェーンを移動します
  • .stop : この要素の現在のすべてのアクションを停止します
  • .fadeToggle : 要素を「非表示」にフェードし始めます
于 2012-04-27T15:58:08.867 に答える