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

I am trying to reduce some code here. I will explain how

我想在这里减少一些代码。我将解释如何

I have multiple Button controls. I am using the click event for each

我有多个Button控件。我正在使用每个点击事件

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

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

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

I want to remove these 3 clicks event and write a single click event. If the click is from

我想删除这3个点击事件并写一个单击事件。如果点击来自

B1 then v1 should be "abc"; B2 then v1 should be "efg"; B3 then v1 should be "xyz'

B1然后v1应为“abc”; B2那么v1应该是“efg”; B3那么v1应该是“xyz”

How can I write code in the best possible way

如何以最佳方式编写代码

4 个解决方案

#1

Store the values in a "hash", then reference them from the handler by id.

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

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

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

#2

You could also use the data property of the link and then get that in the click event.

您还可以使用链接的data属性,然后在click事件中获取该属性。

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

#3

If you have a more generic list of names you can use "each" which just loops through you array.

如果你有一个更通用的名字列表,你可以使用“each”,它只是遍历你的数组。

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

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

As tvanfosson mentioned there are lots of ways to do this. Chances are you may not want to refractor the click events. It's more likely that you need to refractor the code inside of the click event into a more generic function. Make your own function that takes an ID and val and operates on them.

正如tvanfosson所提到的,有很多方法可以做到这一点。您可能不想折射点击事件。您更有可能需要将click事件内部的代码折射成更通用的函数。创建自己的带有ID和val的函数并对它们进行操作。

#4

You can add data attributes like data-customAttr="true" in you controls. And then handle the event like this,

您可以在控件中添加data-customAttr =“true”等数据属性。然后处理这样的事件,

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

Using data- attributes is standard and all such attribute can be accessed through jquery's .data() function.

使用数据属性是标准的,所有这些属性都可以通过jquery的.data()函数访问。

#1