div basierend auf Texteingabe zeigen/verbergen

Ich möchte etwas machen, wo der Benutzer ein "Passwort" eingibt und es zeigt ein div je nachdem, welches Passwort eingegeben wird. Ich sah so etwas mit Zahlen arbeiten, aber ich bin verwirrt wie man mit Buchstaben arbeiten kann. Wie kann ich das schaffen? Hier ist die JSfiddle: http://jsfiddle.net/3XGGn/405/div basierend auf Texteingabe zeigen/verbergen

$(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"/>

Quelle

2017-08-11 user2454060

'' und zu bejahen ist no' müssen in Anführungszeichen zu verpackenden (' 'yes'','' no'') - sie sind Strings – Harangue

für Sie schrieb es, sollten Sie kein neues erschaffen jQuery-Objekt jedes Mal, wenn Sie auf ein Element verweisen. Verwenden Sie stattdessen Variablen. Und benutze '$ .on()' anstelle von '$ .click()' und '$ .change()' http://jsfiddle.net/3XGGn/406/ –

Probieren Sie es aus, dass es in jedem Fall "ja" und "nein" Zeichenfolgen akzeptiert (Unten/Oben), auch im gemischten Fall.

<!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>

Quelle

2017-08-11 23:30:38

Vielen Dank, ich habe vergessen, dass es Fall ist empfindlich, .toLocaleLowerCase funktioniert gut. – user2454060

Versuchen Sie folgendes:

Sie müssen yes zu 'yes' ändern und no zu '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"/>

Quelle

2017-08-11 23:21:41

div basierend auf Texteingabe zeigen/verbergen

Antwort

Verwandte Themen