13

クリックすると同じjavascript機能を実行する7つの異なるボタンがあります。クラスセレクターまたはIDセレクターを使用する必要があります。

$("input.printing").on("click", function(event) {
     printPdf(event);
});

また

   $("#package1Pdf").click(function(event) {
         printPdf(event);
   });
$("#package2Pdf").click(function(event) {
         printPdf(event);
   });
$("#package3Pdf").click(function(event) {
         printPdf(event);
   });
$("#package4Pdf").click(function(event) {
         printPdf(event);
   });

それぞれの長所と短所は何ですか？どちらがより好ましいか。

4

5 に答える 5

13

複数のセレクターなしでIDフィルターを使用できます。

$('[id^="package"]').click(printPdf);

上記は「パッケージ」で始まるすべてのIDを選択します。これは、違いがほとんど意味論的であることを意味します。アプリケーションとその開発方法にとって最も意味のあるものを選択する必要があります。

jQuery選択の柔軟性については、 jQuery属性セレクターページを参照してください。このページにブックマークを付けておけば、2番目の例のようなコードをもう一度書く必要がなくなります。

どちらが良いですか？

適切な要素のセットを論理的かつ正確に定義するクラスを持つように構造を設定している場合は、それを使用して選択する必要があります。

同様に、代わりに特別な名前のIDを指定し、選択したいものを表す説明的なクラス名が添付されていない場合は、ID選択を使用します。パフォーマンスの違いは、アプリケーションを含め、ほとんどすべてのアプリケーションに関係ありません。

于 2013-03-13T18:54:00.410 に答える
3

明らかに、クラスを使用する最初のコードは、はるかにクリーンで、すっきりとしていて、優れています。

IDセレクターが最速です。これは本当です。しかし、現時点では、それは実際には問題ではありません。

したがって、パフォーマンスにそれほど煩わされることはなく（懸念がない限り）、クリーンで保守可能なものを使用してください。

ところで、その匿名関数も必要ありません。下記参照、

$("input.printing").on("click", printPdf);
于 2013-03-13T19:03:45.190 に答える
2

私たち全員が知っているように、idセレクターはより速くてより良いです..しかしあなたの場合..あなたは各idを8回選択しているので..ここで見ることができるようにクラスseletorと比較して遅いです

あなたの場合のクラスセレクターは、より良く、より速く、そしてより読みやすくなっています...

注：近い将来、さらに20個のボタンを追加する必要がある場合はどうなりますか（100個では多すぎます）.....そしてIDセレクターを選択した場合... phewwww !!! つまり、さらに20個のイベントハンドラー......;）;）

于 2013-03-13T19:09:16.427 に答える
1

ほとんどの人が述べているように、使用するセレクターはパフォーマンスに影響を与える可能性がありますが、それは無視できる場合が多く、スタイルと読みやすさの問題です。結論として、jQueryは、idによって個別に、またはクラスや属性セレクターなどの複数選択メソッドを使用して、選択されたすべての要素に対して一意のハンドラーを作成します。個人的には、最初の例が好きです。別のハンドラーを追加することを忘れずに、ビューへの将来の追加をカバーするからです。

于 2013-03-13T19:04:39.563 に答える
1

内部のjQueryはほとんどのブラウザで高速なgetElementByIdを使用するため、Idだけで選択する方が一般的にクラスで選択するよりも高速です。Jqueryに関連するパフォーマンスを向上させる他の多くの方法が示されているため、詳細についてはこの記事を参照してください。ただし、気にする必要があるのはセレクターのパフォーマンスだけではないことを覚えておいてください。多くの不要なイベントにアタッチすると、パフォーマンスの問題が発生する可能性もあります。この問題を軽減するには、デリゲートを使用できます。デリゲートの詳細については、このjQueryのドキュメントを参照してください。

于 2013-03-13T19:08:49.360 に答える