jqueryを使用した単一イベントの複数のコントロール

Question

ここでいくつかのコードを減らそうとしています。私は方法を説明します

私は複数のボタンコントロールを持っています。私はそれぞれのクリックイベントを使用しています

$("#B1").click(function() { 
       var v1 = "abc"; 
      }); 

$("#B2").click(function() { 
       var v1 = "efg"; 
      }); 

$("#B3").click(function() { 
       var v1 = "xyz"; 
      }); 

私はこれらの3クリックイベントを削除し、ワンクリックイベントを書きたいと思います。クリックが

B1の場合、v1は「abc」になります。 B2次にv1は "efg"にする必要があります。 B3は、v1はする必要があり、その後idでハンドラからそれらを参照、ハッシュ 『「XYZ」

にはどうすれば最良の方法

Answer 1

ストア内の値でコードを書くことができます』。

var vals = { "B1": "abc", "B2" : "efg", "B3" : "xyz" }; 

$('[id^="B"]').click(function() { 
    var v1 = vals[this.id]; 
    ...  
}); 

Answer 2

あなたはtvanfossonこれを行うための方法がたくさんある述べたように、あなたはちょうどあなたの配列をループしている「それぞれ」。

var vals = { "B1": "abc", "B2" : "efg", "B3" : "xyz" }; 

jQuery.each(vals, function(i, val) { 
    $("#" + i).click(function(){ 
     var v1 = val; 
    }); 
}); 

を使用することができます名前のより一般的なリストを持っている場合。チャンスあなたはクリック事象を屈折させたくないでしょうか？ clickイベントの内部のコードをより一般的な関数に屈折させる必要がある可能性が高くなります。 IDとvalをとり、それらを操作する独自の関数を作成します。

Answer 3

リンクのdataプロパティを使用して、clickイベントでそのプロパティを取得することもできます。

$('#B1').data('myKey', 'abc'); 
$('#B2').data('myKey', 'efg'); 
$('#B3').data('myKey', 'xyz'); 
$('.buttons').click(function() { 
    var v1 = $(this).data('myKey'); 
}); 

Answer 4

あなたがコントロールにdata-customAttr="true"ようdata属性を追加することができます。そして、このようなイベントを処理し、data-属性を使用して

$('[data-customAttr^="true"]').click(function() { 
var v1 = vals[this.id]; 
});  

は標準であり、そのようなすべての属性は、jQueryの.data()機能を介してアクセスすることができます。