Как уменьшить размер кода для списка флажков в jQuery?

Question

Как вы можете видеть из моего кода, я полностью новичок в JavaScript, jQuery и глобально в языке программирования.

Я ищу, чтобы сохранить список флажков с меньшим количеством строк кода.

Вы можете мне помочь?

$('#customSwitch1').on('change', function(e) {
    if (e.target.checked) {
        $("#LoginModal1").modal();
    }
});
$('#customSwitch2').on('change', function(e) {
    if (e.target.checked) {
        $("#LoginModal2").modal();
    }
});
$('#customSwitch3').on('change', function(e) {
    if (e.target.checked) {
        $("#LoginModal3").modal();
    }
});
$('#customSwitch4').on('change', function(e) {
    if (e.target.checked) {
        $("#LoginModal4").modal();
    }
});

Answer 1

Техника, которую вы ищете, называется «Не повторяйся» или DRY. Для dry вы можете использовать общие классы вместе с data атрибутами для хранения пользовательских метаданных в каждом элементе. Как то так:

<input type="checkbox" class="customSwitch" data-target="#LoginModal1" />    
<input type="checkbox" class="customSwitch" data-target="#LoginModal2" />
<input type="checkbox" class="customSwitch" data-target="#LoginModal3" />

$('.customSwitch').on('change', function() {
  if (this.checked)
    $($(this).data('target')).modal();
});

Answer 2

Вы можете сделать это так: [id^="customSwitch"] выбирает все элементы с id, который начинается с "customSwitch".

 $('[id^="customSwitch"]').on('change', function(e) {
    if (e.target.checked) {
      selected = $(this).attr("id").substr(12);
      $("#LoginModal" + selected).modal();
    }
 });

Answer 3

Вы можете сделать что-то вроде этого

const mapObj = {
    'customSwitch1': 'LoginModal1',
    'customSwitch2': 'LoginModal2',
    'customSwitch3': 'LoginModal3',
    'customSwitch4': 'LoginModal4'
}

$('input[type=checkbox]').on('change', function(e) {
        if (e.target.checked) {
            $("#" + mapObj[$(e.target).attr('id')]).modal();
        }
});

Answer 4

Вы можете сгруппировать все флажки в одном приемнике событий, проанализировать последний символ идентификатора и добавить его к соответствующему модальному идентификатору следующим образом:

$('#customSwitch1, #customSwitch2, #customSwitch3, #customSwitch4').on('change', function(e) {
      if (e.target.checked) {
           let id = e.target.id;
           let modalId = id.match(/\d+/);
           $(`#LoginModal${modalId[0]}`).modal();
      }
});