根據文本輸入顯示/隱藏div

我想讓用戶在「密碼」中鍵入內容，並根據輸入的密碼顯示一個div。我看到類似這樣的數字，但我很困惑關於如何使它與字母一起工作。我該如何做這項工作？這裏是的jsfiddle：http://jsfiddle.net/3XGGn/405/根據文本輸入顯示/隱藏div

$(document).ready(function(){ 
 
    $("#buttontest").click(function(){ 
 
      
 
     if ($('#full_day').val() == yes) { 
 
      $("#yes").show("fast"); 
 
     } 
 
     if ($('#full_day').val() == no) { 
 
      $("#no").show("fast"); 
 
     } 
 
     
 
     else { 
 
      $("#yes").hide("fast");  
 
      $("#no").hide("fast"); 
 
      $("#incorrect").show("500"); 
 
     } 
 
    }); 
 
    $("#full_day").change(function() { 
 
     $("#incorrect").hide("500"); 
 
    }); 
 
       
 

 
});

#yes {display:none;} 
 
#no {display:none;} 
 
#incorrect {display:none;}

<p>type "yes" or "no"</p> 
 
<div id="yes"> 
 
That's Correct! 
 
</div> 
 
<div id="no"> 
 
Also correct! 
 
</div> 
 
<div id="incorrect"> 
 
Sorry, Try again! 
 
</div> 
 
<input type='text' id="full_day"/> 
 
<input type='button' id="buttontest" value="clickme"/>

來源

2017-08-11 user2454060

'yes'和'no'需要被包裹在引號（'「yes''，'」 no''） - 他們是 – Harangue

改寫爲你的字符串，你不應該創建一個新的每次你引用一個元素時，jquery對象。改用變數。並使用'$ .on（）'而不是'$ .click（）'和'$ .change（）'http://jsfiddle.net/3XGGn/406/ –

嘗試此操作，在任何情況下（下/上）都會接受「是」和「否」字符串，即使在混合情況下也是如此。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
    <meta charset="utf-8" /> 
    <script> 
     $(document).ready(function() { 
      $("#buttontest").click(function() { 
       $(".all").hide("fast"); 
       if ($('#full_day').val().toLocaleLowerCase() == "yes") { 
        $("#yes").show("fast"); 
       } else if ($('#full_day').val().toLocaleLowerCase() == "no") { 
        $("#no").show("fast"); 
       } else { 
        $("#incorrect").show("500"); 
       } 
      }); 
      $("#full_day").change(function() { 
       $("#incorrect").hide("500"); 
      }); 
     }); 
    </script> 
    <style> 
     #yes { 
      display: none; 
     } 

     #no { 
      display: none; 
     } 

     #incorrect { 
      display: none; 
     } 
    </style> 
</head> 
<body> 

    <p>type "yes" or "no"</p> 
    <div class="all" id="yes"> 
     That's Correct! 
    </div> 
    <div class="all" id="no"> 
     Also correct! 
    </div> 
    <div class="all" id="incorrect"> 
     Sorry, Try again! 
    </div> 
    <input type='text' id="full_day" /> 
    <input type='button' id="buttontest" value="clickme" /> 
</body> 
</html>

來源

2017-08-11 23:30:38

非常感謝你，我忘記了這種情況敏感，.toLocaleLowerCase效果很好。 – user2454060

試試這個：

您需要更改yes到'yes'和no到'no'

$(document).ready(function(){ 
 

 
$("#buttontest").click(function(){ 
 
if ($('#full_day').val() == 'yes') { 
 
\t $("#yes").show("fast"); 
 
} 
 
else if ($('#full_day').val() == 'no') { 
 
\t $("#no").show("fast"); 
 
} 
 
else { 
 
\t $("#yes").hide("fast");  
 
\t $("#no").hide("fast"); 
 
\t $("#incorrect").show("500"); 
 
} 
 
}); 
 

 
$("#full_day").change(function() { 
 
$("#incorrect").hide("500"); 
 
}); 
 

 
});

#yes {display:none;} 
 
#no {display:none;} 
 
#incorrect {display:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p>type "yes" or "no"</p> 
 
<div id="yes"> 
 
That's Correct! 
 
</div> 
 
<div id="no"> 
 
Also correct! 
 
</div> 
 
<div id="incorrect"> 
 
Sorry, Try again! 
 
</div> 
 
<input type='text' id="full_day"/> 
 
<input type='button' id="buttontest" value="clickme"/>

來源

2017-08-11 23:21:41

根據文本輸入顯示/隱藏div

回答

相關問題