javascript - 大量重复的 if/else 语句的最大优化/代码减少是多少？

Question

我有几个根据选项隐藏或显示元素的选择，jquery 过程对所有人都是相同的，但具有不同的 ID。

到目前为止，我为每个选择设置了两个 if/else 条件，一个用于隐藏/显示，另一个用于删除保存在其中一个元素中的任何内容，以防被隐藏。

这就是我隐藏或显示的方式：

  $('#registration_welcome_template_option').on('change', function () {
    if (this.value === 'default') {
      $('#registration_welcome_default').show();
      $('#registration_welcome_custom').hide();
    } else {
      $('#registration_welcome_default').hide();
      $('#registration_welcome_custom').show();
    }
  }).change();

这就是我擦除隐藏元素数据的方式：

$('#registration_welcome_template_option').closest('form').submit(function () {
  if ($('#registration_welcome_template_option').val() === 'default') {
    $('#organization_admin_type_pages_email_registration_welcome_data_subject').val('');
    $('#organization_admin_type_pages_email_registration_welcome_data_body').val('');
  }
});

基本上我有这两个块每个重复 6 次，唯一的区别是 ID。由于这是对代码和处理的大量浪费，因此我正在寻找可能的最大优化以尽可能减少代码。

标签： javascriptjquery

Answer 1

您可以添加类并循环遍历元素

$('.registration_welcome_template_option').change(function(e){
    $('.className').each(function(){
        if (this.value === 'default') {
            $(this).toggle();
        }
    };
});
$('#registration_welcome_template_option').closest('form').submit(function () {
  if ($('#registration_welcome_template_option').val() === 'default') {
    $('.className').each(function(){
            $(this).val('');
        }
    };
  }
});