Question

我正在慢慢地学习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>

Answer 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");
    });
});

Answer 2

对您的代码进行此更改

添加val()以获取元素的值
在条件

==

为了比较字符串，您应该添加“Kasey”

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

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

Answer 3

问题是你的函数在加载文档时读取fname的值，而不是在用户输入之后读取。此外，在分配值

时，您将长度分配给val

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

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

if (val == 'Kasey')

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

3 个答案: