javascript - 使用 JQuery 压缩 Javascript 条件 block

Question

我有 3 个代码块，它们都工作正常，但每个代码块因我的目标 ID 而略有不同。我想将所有这些压缩为一个代码块。我知道属性开头为，属性结尾为，但这有点复杂，不确定如何应用它。

如你所见，我有:accountFirewallFilter、globalFirewallFilter 和firewallFilter。

function toggleType(field, initial){
switch($("#accountFirewallFilter_"+field+"Type").val()){
  case "any":
    $("#accountFirewallFilter_"+field+"").parent().show();
    $("#accountFirewallFilter_"+field+"").prop('disabled', true);
    $("#accountFirewallFilter_"+field+"").prop('name', "accountFirewallFilter["+field+"]");
    $("#accountFirewallFilter_"+field+"").val(null);
    $("#accountFirewallFilter_"+field+"Options").parent().hide();
    $("#accountFirewallFilter_"+field+"Options").prop('name', "accountFirewallFilter["+field+"Options]");
    break;
  case "address":
    $("#accountFirewallFilter_"+field+"").parent().show();
    $("#accountFirewallFilter_"+field+"").prop('disabled', false);
    $("#accountFirewallFilter_"+field+"").prop('name', "accountFirewallFilter["+field+"]");
    if(!initial){
      $("#accountFirewallFilter_"+field+"").val(null);
    }
    $("#accountFirewallFilter_"+field+"Options").parent().hide();
    $("#accountFirewallFilter_"+field+"Options").prop('name', "accountFirewallFilter["+field+"Options]");
    break;
  case "network":
    $("#accountFirewallFilter_"+field+"").parent().hide();
    $("#accountFirewallFilter_"+field+"").prop('disabled', true);
    $("#accountFirewallFilter_"+field+"").prop('name', "accountFirewallFilter["+field+"Disabled]");
    $("#accountFirewallFilter_"+field+"Options").parent().show();
    $("#accountFirewallFilter_"+field+"Options").prop('name', "accountFirewallFilter["+field+"]");

    // Used to load the "+field+" into the dropdown on edit
    if($("#accountFirewallFilter_"+field+"").val()){
      $("#accountFirewallFilter_"+field+"Options").val($("#accountFirewallFilter_"+field+"").val());
    }

    break;
}
}

toggleType('source', true);
toggleType('destination', true);
// $("[id$='Filter_sourceType']").change(function(){ toggleType('source', false); });
// $("[id$='Filter_destinationType']").change(function(){ toggleType('destination', false); });

// function toggleType(field, initial){
// switch($("#globalFirewallFilter_"+field+"Type").val()){
//   case "any":
//     $("#globalFirewallFilter_"+field+"").parent().show();
//     $("#globalFirewallFilter_"+field+"").prop('disabled', true);
//     $("#globalFirewallFilter_"+field+"").prop('name', "globalFirewallFilter["+field+"]");
//     $("#globalFirewallFilter_"+field+"").val(null);
//     $("#globalFirewallFilter_"+field+"Options").parent().hide();
//     $("#globalFirewallFilter_"+field+"Options").prop('name', "globalFirewallFilter["+field+"Options]");
//     break;
//   case "address":
//     $("#globalFirewallFilter_"+field+"").parent().show();
//     $("#globalFirewallFilter_"+field+"").prop('disabled', false);
//     $("#globalFirewallFilter_"+field+"").prop('name', "globalFirewallFilter["+field+"]");
//     if(!initial){
//       $("#globalFirewallFilter_"+field+"").val(null);
//     }
//     $("#globalFirewallFilter_"+field+"Options").parent().hide();
//     $("#globalFirewallFilter_"+field+"Options").prop('name', "globalFirewallFilter["+field+"Options]");
//     break;
//   case "network":
//     $("#globalFirewallFilter_"+field+"").parent().hide();
//     $("#globalFirewallFilter_"+field+"").prop('disabled', true);
//     $("#globalFirewallFilter_"+field+"").prop('name', "globalFirewallFilter["+field+"Disabled]");
//     $("#globalFirewallFilter_"+field+"Options").parent().show();
//     $("#globalFirewallFilter_"+field+"Options").prop('name', "globalFirewallFilter["+field+"]");

//     // Used to load the "+field+" into the dropdown on edit
//     if($("#globalFirewallFilter_"+field+"").val()){
//       $("#globalFirewallFilter_"+field+"Options").val($("#globalFirewallFilter_"+field+"").val());
//     }

//     break;
// }
// }

// toggleType('source', true);
// toggleType('destination', true);

// $("[id$='Filter_sourceType']").change(function(){ toggleType('source', false); });
// $("[id$='Filter_destinationType']").change(function(){ toggleType('destination', false); });

// function toggleType(field, initial){
// switch($("#firewallFilter_"+field+"Type").val()){
//   case "any":
//     $("#firewallFilter_"+field+"").parent().show();
//     $("#firewallFilter_"+field+"").prop('disabled', true);
//     $("#firewallFilter_"+field+"").prop('name', "firewallFilter["+field+"]");
//     $("#firewallFilter_"+field+"").val(null);
//     $("#firewallFilter_"+field+"Options").parent().hide();
//     $("#firewallFilter_"+field+"Options").prop('name', "firewallFilter["+field+"Options]");
//     break;
//   case "address":
//     $("#firewallFilter_"+field+"").parent().show();
//     $("#firewallFilter_"+field+"").prop('disabled', false);
//     $("#firewallFilter_"+field+"").prop('name', "firewallFilter["+field+"]");
//     if(!initial){
//       $("#firewallFilter_"+field+"").val(null);
//     }
//     $("#firewallFilter_"+field+"Options").parent().hide();
//     $("#firewallFilter_"+field+"Options").prop('name', "firewallFilter["+field+"Options]");
//     break;
//   case "network":
//     $("#firewallFilter_"+field+"").parent().hide();
//     $("#firewallFilter_"+field+"").prop('disabled', true);
//     $("#firewallFilter_"+field+"").prop('name', "firewallFilter["+field+"Disabled]");
//     $("#firewallFilter_"+field+"Options").parent().show();
//     $("#firewallFilter_"+field+"Options").prop('name', "firewallFilter["+field+"]");

//     // Used to load the "+field+" into the dropdown on edit
//     if($("#firewallFilter_"+field+"").val()){
//       $("#firewallFilter_"+field+"Options").val($("#firewallFilter_"+field+"").val());
//     }

//     break;
// }
// }

Answer 1

似乎每个代码块中唯一不同的是以下名称:

• 帐户防火墙过滤器
• 防火墙过滤器
• 全局防火墙过滤器

考虑到这一点，您可以创建第三个 filter 参数，您可以在其中为这三个项目指定一个值。

function toggleType(field, initial, filter) {
 switch($("#"+filter+"_"+field+"Type").val()) {
  case "any":
    $("#"+filter+"_"+field+"").parent().show();
    $("#"+filter+"_"+field+"").prop('disabled', true);
    $("#"+filter+"_"+field+"").prop('name', filter+"["+field+"]");
    $("#"+filter+"_"+field+"").val(null);
    $("#"+filter+"_"+field+"Options").parent().hide();
    $("#"+filter+"_"+field+"Options").prop('name', filter+"["+field+"Options]");
    break;
  case "address":
    ...
 }
}

然后将每个值作为参数(我们甚至可以将其放入循环中，数组中的三个项目重复 source 和 destination):

toogleType('source', true, "accountFirewallFilter");
toogleType('destination', true, "accountFirewallFilter");
toogleType('source', true, "firewallFilter");
toogleType('destination', true, "firewallFilter");
toogleType('source', true, "globalFirewallFilter");
toogleType('destination', true, "globalFirewallFilter");