Jquery 如果输入值等于特定文本，则显示div_Jquery_Css_Forms_Text_Input

Jquery 如果输入值等于特定文本，则显示div

jquery css forms text input

Jquery 如果输入值等于特定文本，则显示div,jquery,css,forms,text,input,Jquery,Css,Forms,Text,Input,我正在慢慢地学习jQuery，但肯定会，所以请原谅我的无知。我在谷歌上做了很多搜索，得到了下面的弗兰肯斯坦例子在本例中，如果用户在输入中输入“Kasey”，我希望div#pete具有显示：block 提前谢谢 <!DOCTYPE html> <html> <head> <script> $(document).ready(function(){ var val = $("#fname").length; if (val = Kasey) {

我正在慢慢地学习jQuery，但肯定会，所以请原谅我的无知。我在谷歌上做了很多搜索，得到了下面的弗兰肯斯坦例子

在本例中，如果用户在

输入中输入“Kasey”，我希望div#pete具有显示：block

提前谢谢
<!DOCTYPE html>
<html>
<head>

<script>
$(document).ready(function(){ 
var val = $("#fname").length;
if (val = Kasey) {
        $("#pete").css("display", "block");
    } 
</script>
</head>
<body>

<p>Name: <input type="text" id="fname"></p>
<p id="pete" style="display:none;" >Pete</p>

</body>
</html>


$（文档）.ready（函数（）{
var val=$（“#fname”）.length；
如果（val=Kasey）{
$（“#pete”）.css（“显示”、“块”）；
} 
姓名：
皮特
您可以使用处理程序来侦听keyup
事件。在该事件中，使用此.value
来获取值
$(document).ready(function() {
    $("#fname").keyup(function() {
        if (this.value == "Kasey") {
            $("#pete").css("display", "block");
        }
        else {
            $("#pete").css("display", "none");
        }
    });
});


UPADATE:
您可以将代码简化如下
$(document).ready(function () {
    $("#fname").keyup(function () {
        $("#pete").css("display", this.value == "Kasey" ? "block" : "none");
    });
});

这样做可以更改您的代码

添加val（）
以获取元素的值
在条件下使用==
运算符
为了比较字符串，您应该添加“Kasey”这样的引号

注意：如果要在表单上执行此操作，请加载如下代码或添加keyup（）
event
<script>
$(document).ready(function(){ 
var val = $("#fname").val();
if (val == 'Kasey') {
        $("#pete").css("display", "block");
    }
 }); 
 </script>


$（文档）.ready（函数（）{
var val=$（“#fname”）.val（）；
如果（val='Kasey'）{
$（“#pete”）.css（“显示”、“块”）；
}
}); 
问题在于，您的函数是在加载文档时读取fname的值，而不是在用户输入之后读取。此外，您是在分配值时将长度分配给val
var val = $("#fname").val();

最后，if语句需要is等于运算符和is==
if (val == 'Kasey')