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

我有几个选择，根据选项隐藏或显示元素，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的。

---

由于这是对代码和处理的巨大浪费，我正在寻找最大可能的优化，以尽可能减少代码。

编写一个以ID为参数的通用函数

function showOnDefault(id1, id2) {

    id1 = '#' + id1;
    id2 = '#' + id2;

    if (this.value === 'default') {
      $(id1).show();
      $(id2).hide();
    } else {
      $(id1).hide();
      $(id2).show();
    }
}

然后在事件处理程序中将其与适当的值和上下文绑定

$('#registration_welcome_template_option').on('change', function() { 
     showOnDefault.bind(this, 'registration_welcome_default', 'registration_welcome_custom')
}).change();


$('#another_select').on('change', function() { 
     showOnDefault.bind(this, 'another_default', 'another_custom')
}).change();

---

您可以添加类并循环元素

$('.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('');
        }
    };
  }
});

---

所以对于第一个if/else语句，可以使用toggle隐藏或显示元素

var createFormChange = function(formName, _default, _custom){
    $(formName).on('change', function () {
        var isDefaultValue = this.value === 'default';
        // if this is true it will show defualt value and hide custom, and opposite.
        $(_default).show(isDefaultValue);
        $(_custom).hide(!isDefaultValue);
      }).change();
}

要清除值，可以使用重置值的函数。它接受表单名和所有要从中清除值的标记

var createFormSubmit = function(formName, dataToClear){
  $(formName).closest('form').submit(function () {
    if ($(formName).val() === 'default') {
    // clearing all values 
    dataToClear.forEach(element =>  element.val('') );
    }
  });
}

createFormSubmit("#registration_welcome_template_option", ['#organization_admin_type_pages_email_registration_welcome_data_subject', '#organization_admin_type_pages_email_registration_welcome_data_body']);
createFormChange("#registration_welcome_template_option", "#registration_welcome_default", "#registration_welcome_custom")

---

switch statements.OP仍然必须有6组明显重复的精确代码。这里唯一的区别是切换