-1

我是JavaScript新手，需要您的建议。这个想法是根据选择选项显示/隐藏文本字段。我有一个工作代码，但我相信它可以更具可读性和性感。我错过了什么？简化JS代码

<script type="text/javascript"> 
<!-- 
    function showHide(){ 
     var selectedValue =document.getElementById("choice_criteria_id").value; 
     var src_addr = document.getElementById("id_src_addr"); 
     var dst_addr = document.getElementById("id_dst_addr"); 
     var port = document.getElementById("id_port"); 
     var port_range = document.getElementById("id_port_range"); 

     if (selectedValue == "source_ip"){ 
      src_addr.style.display = "inline"; 
      dst_addr.style.display = "none"; 
      port.style.display = "none"; 
      port_range.style.display = "none"; 


     } else if (selectedValue == "dest_ip"){ 
      dst_addr.style.display = "inline"; 
      src_addr.style.display = "none"; 
      port.style.display = "none"; 
      port_range.style.display = "none"; 


     } else if (selectedValue == "port"){ 
      port.style.display = "inline"; 
      src_addr.style.display = "none"; 
      dst_addr.style.display = "none"; 
      port_range.style.display = "none"; 

     } else if (selectedValue == "port_range"){ 
      port_range.style.display = "inline"; 
      src_addr.style.display = "none"; 
      dst_addr.style.display = "none"; 
      port.style.display = "none"; 
     } 
} 

--> 
</script>

来源

2016-03-23 Johny Jho

为什么不使用jQuery？他们有一些简单的功能，如'切换'谁将简化你的功能很多 –

我投票结束这个问题作为题外话，因为它更适合http://codereview.stackexchange.com。 – deceze

@Luan https://twitter.com/iamdevloper/status/710833889825001472 – deceze

可以使用Conditional (ternary) Operator参数的通用方法。

语法：

condition ? expr1 : expr2

重新格式化代码：

function showHide(){ 
    var selectedValue =document.getElementById("choice_criteria_id").value; 
    document.getElementById("id_src_addr").style.display = (selectedValue == "source_ip") ? "inline" : "none"; 
    document.getElementById("id_dst_addr").style.display = (selectedValue == "dest_ip") ? "inline" : "none"; 
    document.getElementById("id_port").style.display = (selectedValue == "port") ? "inline" : "none"; 
    document.getElementById("id_port_range").style.display = (selectedValue == "port_range") ? "inline" : "none"; 
}

Example in CodePen

来源

2016-03-23 13:53:19 bugyt

好想法与三元，但在这个变种它不工作，不知道为什么 –

这是在这里工作：http://codepen.io/bugyt/pen/RaVgbY – bugyt

我已经使用onchange事件，而不是按钮单击。我需要对JS代码进行任何更改吗？ –

您可以显示和隐藏你必须通过该元素的唯一的ID作为功能

function hideElement(Id) 
{ 
    var a=document.getElementById("Id"); 
    //perform what you want 
}

来源

2016-03-23 13:52:05

简化JS代码

回答

Example in CodePen

相关问题