根据文本输入显示/隐藏div
[英]show/hide div based on text input
问题描述
I want to make something where the user types in a "password" and it shows a div depending on which password is typed in. I saw something like this work with numbers but I am confused on how to make it work with letters. 
我想在用户输入“密码”的地方做一些事情，并根据输入的密码显示一个div。我看到类似的东西可以与数字一起使用，但是我对如何使其与字母一起使用感到困惑。 How can I make this work? 我该如何进行这项工作？ Here is the JSfiddle: http://jsfiddle.net/3XGGn/405/ 这是JSfiddle： http : //jsfiddle.net/3XGGn/405/
$(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"/>
2 个解决方案
解决方案1
0 2017-08-11 23:21:41
Try this: 尝试这个：
You need to change yes to 'yes' and no to 'no' 您需要更改yes对'yes' ，并no对'no'
$(document).ready(function(){ $("#buttontest").click(function(){ if ($('#full_day').val() == 'yes') { $("#yes").show("fast"); } else 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;}
<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"/>
解决方案2
0 已采纳 2017-08-11 23:30:38
Try this it will accept "yes" and "no" strings in any case (Lower/Upper) even in mixed case as well. 尝试此操作，即使在混合大小写的情况下，它也将在任何情况下（大/小）接受“是”和“否”字符串。
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.