switch文よりもハンドラを組み合わせる方法がJQueryの方が多いですか？

それは、ボタンクリックイベントに対して複数のハンドラを持っている方が良いですか、switch文をクリックハンドラを結合するのに適していますか？これは私のコードで動作しますが、もっとクールでJQueryを使った方法があるのでしょうか？switch文よりもハンドラを組み合わせる方法がJQueryの方が多いですか？

<html> 
    <button id="button1">Button 1</button> 
    <button id="button2">Button 2</button> 
    <button id="button3">Button 3</button> 
</html>

どちらが優れていますか？

$('button').click(function(){ 
    switch(this.id){ 
     case "button1": 
      alert("Do what button 1 says"); 
      break; 

     case "button2": 
      alert("Do what button 2 says"); 
      break; 

     case "button3": 
      alert("Do what button 3 says"); 
      break; 
    } 
});

またはこの、

$('#button1').click(function(){ 
    alert("Do what button 1 says") 
}); 

$('#button2').click(function(){ 
    alert("Do what button 3 says") 
}); 

$('#button3').click(function(){ 
    alert("Do what button 3 says") 
});

...それともは違いはありませんか？

出典

2012-03-15 Allan Taylor

これは、すべてのイベントハンドラに依存します。ハンドラ間に共有コードがあり、小さな部分のみが特定のものである場合、ハンドラ内のボタンを区別するのが良いかもしれません。各ボタンのハンドラがが全く異なる場合
、なぜ一つに3つの無関係な機能を置きますか？

var handlers = { 
    id1: function() { 
     // ... 
    }, 
    id2: function() { 
     //... 
    } 
};

を単にhandlers[this.id]()で関数を呼び出す：

また、機能のマップを作成することができます。

最終的に、偶数のハンドラを各要素に一方向に割り当てるので、コードをどのように構造化するか（多かれ少なかれ個人的な好みです）の問題です。

出典

2012-03-15 00:43:33

私はマップテクニックを試しましたが、それを動作させることができませんでした。関数呼び出しの後に "（）"が必要であるかどうかはわかりませんでした。今私はそれを見る意味がある。ありがとう。 –

最初の方法では、buttonタグでボタン要素を探し、すべてのボタン要素にclickイベントハンドラーを添付します。

第2のアプローチは、そこにIDによって各ボタンを見つけても、ボタン要素のそれぞれにclickイベントハンドラをアタッチします。

だから、基本的に違いはありません。

あなたはそれを最適化したい場合、あなたはon一つだけのイベントハンドラで作業することができます。

$(document).on('click', 'button', function(){ 
    switch(this.id){ 
     case "button1": 
      alert("Do what button 1 says"); 
      break; 

     case "button2": 
      alert("Do what button 2 says"); 
      break; 

     case "button3": 
      alert("Do what button 3 says"); 
      break; 
    } 
});

それが文書に一つだけのイベントハンドラをアタッチし、クリックイベントがトリガされるたびにbuttonセレクタを探しますこの方法です。代わりにdocumentの常にページに存在するすべての親要素のコンテナにイベントを添付することは常に良いです

注意。

リファレンス - http://api.jquery.com/on/

出典

2012-03-15 00:43:31 ShankarSangoli

文書にクリックイベントをバインドはお勧めしません。 jQueryで '.live（）'が廃止された理由は、それがそうだったからです。適切なイベントハンドラとイベントを照合しようとすると、あまりに多くの輻輳が発生する可能性があります。イベントは、実際のオブジェクト自体に、または実用的な最も近い祖先にバインドする必要があります。可能であれば、トップレベルのドキュメントまたは本文にバインドしないでください。詳細については、[今日のこの回答]（http://stackoverflow.com/questions/9711118/why-not-take-javascript-event-delegation-to-the-extreme/9711252#9711252）を参照してください。 – jfriend00

私はあなたのことを聞いて、私はいつもそのページで常に利用可能な直接の親にイベントを添付するようにします。しかし、マークアップ構造がわからない場合は、マークアップ構造を文書に付加することは意味があります。しかしあなたはあなたの答えでそれを非常にうまく説明してくれました+1： – ShankarSangoli

Javascript、メンテナンス性、および読みやすさには注意が必要です。これまで述べてきたように、私はいつも後者を好んでいました。コードを各個人の機能ボタン...一般的に任意のUIでは、任意のボタンは非常に特定の目的を別のものと比較して持ちます。

出典

2012-03-15 00:48:24 sethcall

たとえば、すべてのメッセージを配列に保存し、idに加えてボタンに.buttonクラスを追加することができます。考え方はclick()にIDを抽出し、配列から正しいメッセージを取得することです。ような何か：

var alerts = ['Hello', 'There', 'World'], 
    $buttons = $('.button'); 

$buttons.click(function(){ 
    var n = this.id.match(/\d+/); // Assuming that id is `buttonX`... 
    alert(alerts[n-1]); 
});

出典

2012-03-15 01:01:28 elclanrs

私が見る主な違いは、そのオプション1であるがに（おそらく多くの空のイベントとなってしまいます）ページ上のすべてのボタンをclickイベントをバインドするために起こっている、2番目は唯一なりますイベントをターゲットボタンにアタッチします。

私はjavascriptのパフォーマンスのためのsticklerはありませんが、私は2番目のオプションがより読みやすく、メンテナンスの問題が少なくなると言います。

パラメータが少し異なるにもかかわらず、異なるボタンがほぼ同じ機能を実行している場合は、ボタンの要素にdata-属性を使用し、同じタスクを実行するすべてのボタンが同じクリックイベントを使用するようにするのがよいでしょう。これは、クリックされた実際のhtml要素から一意のパラメータを取り除きます。過度に単純化した例：

HTML：

<button data-effect="slide" ...>slide</button> 
<button data-effect="fade" ...>slide</button>

のjavascript：

$("button[data-effect]".click(function(){ 
    //do stuff 
    var $this = $(this); 
    $this.hide($this.attr("data-effect") || "blind") 
});

出典

2012-03-15 01:02:16

クリックしたときに何か起こることを意味していない場合は、UIにボタンが表示されるのはなぜですか？ –

なぜ、それが意図していないボタンでボタンクリックハンドラを起動させるのですか？ –

私はクリックイベントの仕組みを誤解しているかもしれません。すべてのボタンに意図したハンドラがあると仮定して、ボタンをクリックしたときにクリックイベントが発生し、ハンドラがボタンIDに基づいて正しいコードを処理すると、そのボタンはどうしたのでしょうか？私はそれがクリックイベントを必要としないと思うことができる唯一のボタンは送信ボタンです。この場合、ボタンのクラスまたは親コンテナをセレクタに含めるだけです。 –

switch文よりもハンドラを組み合わせる方法がJQueryの方が多いですか？

答えて

関連する問題