如何在jQuery中實現If ... else結構？

這裏是我的JSP代碼片段，它使用Spring MVC的如何在jQuery中實現If ... else結構？

<form:select path="noOfBankDetails" id = "noOfBankDetails"> 
<form:option value="0">0</form:option> 
<form:option value="1">1</form:option> 
<form:option value="2">2</form:option> 
<form:option value="3">3</form:option> 
<form:option value="4">4</form:option> 
</form:select> 

<!-- All the following divs are hidden --> 
<div id = "firstBankDetail"> 
<div id = "secondBankDetail"> 
<div id = "thirdBankDetail"> 
<div id = "fourthBankDetail">

這裏是我的jQuery的片段，顯示在下拉noOfBankDetails改變

$("#noOfBankDetails").change(function(){ 
      $("#firstBankDetail").show(); 
      $("#secondBankDetail").show(); 
      $("#thirdBankDetail").show(); 
      $("#fourthBankDetail").show(); 
     });

它完美罰款所有div ......但我想實現不同的東西僞它是這樣的

IF noOfBankDetails IS 0 THEN 
    Show none of divs 
ELSE IF noOfBankDetails IS 1 THEN 
    Show div firstBankDetail 
ELSE IF noOfBankDetails IS 2 THEN 
    Show div firstBankDetail 
    Show div secondBankDetail 
and so on..

我應該怎樣着手做這jQuery的。我是jQuery的初學者。請提供一些指導。

來源

2013-09-30 Abhishek Singh

你已經制定了邏輯。只需將它們逐行轉換成jquery代碼即可。多數民衆贊成..後擔心優化 – karthikr

的jQuery if else是JavaScript的if else僅供參考，反正：

$("#noOfBankDetails").change(function(){ 
    if (this.value == 0) { 
     //do 0 stuff 
    } else if (this.value == 1) { 
     //do 1 stuff 
    } else if (value == 2) { 
     //do 2 stuff 
    } 
});

或交換機：

$("#noOfBankDetails").change(function(){ 
    switch(this.value) { 
     case 0: //do 0 stuff 
     break 

     case 1: //do 1 stuff 
     break; 

     case 2: //do 2 stuff 
     break; 
    } 
});

來源

2013-09-30 13:50:15 tymeJV

+ 1的開關建議，並節省我整理鍵入一個例子:) – Archer

[案例切換（在Chrome中）比if-else慢得多（http：// jsperf。 com/switch-if-else/33） - 可能是因爲它正在被轉換成JS引擎中的if-else語句。 – Blazemonger

你不需要的jQuery的，如果/ ELSEIF /人。你可以使用簡單的Javascript：

我希望我沒有錯誤。應該管用。

$("#noOfBankDetails").change(function(){ 
    var value = $(this).val(); 

    if(value == 0) { 
    $("#firstBankDetail").show(); 
    } 
    else if(value == 1) { 
    $("#secondBankDetail").show(); 
    } 
    else if(value == 2) { 
    $("#thirdBankDetail").show(); 
    $("#fourthBankDetail").show(); 
    } 
});

來源

2013-09-30 13:52:45

$("#noOfBankDetails").change(function() { 
    if ($(this).val() == 0) { 
     $("#firstBankDetail").hide(); 
     $("#secondBankDetail").hide(); 
     $("#thirdBankDetail").hide(); 
     $("#fourthBankDetail").hide(); 
     $("#secondBankDetail").hide(); 
     $("#thirdBankDetail").hide(); 
     $("#fourthBankDetail").hide(); 
    } else if ($(this).val() == 1) { 
     $("#firstBankDetail").show(); 
    } else if ($(this).val() == 2) { 
     $("#firstBankDetail").show(); 
     $("#secondBankDetail").show(); 
    } else if ($(this).val() == 3) { 
     $("#firstBankDetail")..show(); 
     $("#secondBankDetail").show(); 
     $("#secondBankDetail").show(); 
    } 
    //Continue the same logic below 
    else if ($(this).val() == 4) {} 
});

來源

2013-09-30 13:55:24

我認爲你需要檢查你的代碼。你在其中的一些重複相同的行動。 – Archer

如何在jQuery中實現If ... else結構？

回答

相關問題