使用jquery使用单个事件的多个控件

我试图减少一些代码在这里。我会解释怎么做

我有多个按钮控件。我正在为每个用户使用单击事件

$("#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应该是“xyz”

如何以最佳方式编写代码

将值存储在“哈希”中，然后通过id从处理程序中引用它们

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

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

---

如果您有一个更通用的名称列表，您可以使用“each”，它只是在数组中循环

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

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

---

正如tvanfosson提到的，有很多方法可以做到这一点。你可能不想折射click事件。你更可能需要折射click事件中的代码到一个更通用的函数中。制作你自己的函数，它接受ID和val并对它们进行操作。

你也可以使用

数据>属性，然后在单击事件中获取该属性

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

您可以在控件中添加
data
属性，如
data customAttr=“true”
，然后像这样处理事件

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

使用
data-
属性是标准的，所有这样的属性都可以通过jquery的
.data（）
函数访问。
谢谢。“[id^=“B”]”是什么意思？是否还有其他方法写入它，因为按钮可能并不总是像B1、B2等[id^=“B”]表示ID以B开头的任何元素。请参阅jQuery文档中的选择器部分。@Juarte--有很多方法可以编写它。我刚刚输入了您的示例。最好的方法可能是将CSS类分配给要应用行为并使用它的元素。然后，选择器如下所示$（'.commonClickable'）…--假设类名为“commonClickable”。tvanfosson..谢谢一位大师！你让这件复杂的事情看起来很简单..你在哪里写博客？