Несколько элементов управления с одним событием, используя 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 должен быть "xyz"

Как написать код наилучшим образом

Answer 1

Сохраните значения в «хэш», затем обратитесь к ним из обработчика по идентификатору.

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

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

Answer 2

Вы также можете использовать свойство data ссылки, а затем получить его в событии click.

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

Answer 3

Вы можете добавить data атрибуты типа data-customAttr="true" в свои элементы управления. А затем обработать событие, как это,

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

Использование атрибутов data- является стандартным, и ко всем таким атрибутам можно обратиться через функцию .data() jquery.

Answer 4

Если у вас есть более общий список имен, вы можете использовать «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 и работает с ними.