如何减少jQuery中复选框列表的代码大小？

Posted 2021-04-05

就像您可以通过我的代码看到的那样，我完全是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();
    }
});

答案

您正在寻找的技术叫不重复自己，或干。为了解决这个问题，您可以使用通用类以及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();
});

另一答案

您可以在一个事件侦听器中对所有复选框进行解析，解析id的最后一个字符，并将其附加到相应的模型id上，如下所示：

$('#customSwitch1, #customSwitch2, #customSwitch3, #customSwitch4').on('change', function(e) {
      if (e.target.checked) {
           let id = e.target.id;
           $(`#LoginModal${id}`).modal();
      }
});