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

【问题标题】：if input value equals specific text, display div如果输入值等于特定文本，则显示 div
【发布时间】：2014-04-02 08:52:49
【问题描述】：

我正在缓慢但肯定地学习 jQuery，所以请原谅我的无知。我做了很多谷歌搜索，导致了下面的科学怪人示例。

在此示例中，如果用户在 input 中输入“Kasey”，我希望 div#pete 具有 display: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>

【问题讨论】：

标签： jquery css forms text input

【解决方案1】：

您可以使用 keyup() 处理程序来监听 keyup 事件。在里面使用this.value 来获取值

$(document).ready(function() {
    $("#fname").keyup(function() {
        if (this.value == "Kasey") {
            $("#pete").css("display", "block");
        }
        else {
            $("#pete").css("display", "none");
        }
    });
});

FIDDLE

更新：

您可以将代码简化如下

$(document).ready(function () {
    $("#fname").keyup(function () {
        $("#pete").css("display", this.value == "Kasey" ? "block" : "none");
    });
});

【讨论】：

【解决方案2】：

对您的代码进行此更改

添加val() 以获取元素的值
在条件中使用== 运算符
为了比较字符串，您应该添加引号，例如“Kasey”

注意：如果您想在表单加载代码上执行此操作，如下所示或添加 keyup() 事件

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

【讨论】：

【解决方案3】：

问题是您的函数在文档加载时读取 fname 的值，而不是在用户输入后读取。此外，当您应该分配值时，您正在将长度分配给 val

var val = $("#fname").val();

最后，您的 if 语句需要 is == 的等于运算符

if (val == 'Kasey')

【讨论】：