Question

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

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

的点击事件

$("#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”

如何以最佳方式编写代码

Answer 1

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

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

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

Answer 2

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

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

Answer 3

如果你有一个更通用的名字列表，你可以使用“each”来循环你的数组。

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

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

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

Answer 4

您可以在控件中添加data等data-customAttr="true"属性。然后像这样处理事件，

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

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

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

4 个答案: