-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

相關問題