Question

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

在这个例子中，如果用户在输入中输入“Kasey”或“KASEY”或“Kasey”，我希望div＃pete有display：block。

提前致谢！

<!DOCTYPE html>
<html>
<head>

<script>
  
$(document).ready(function () {
    $("#fname").keyup(function () {
        $("#pete").css("display", this.value == "Kasey,KASEY,Kasey" ? "block" : "none");
    });
});

</script>


</head>
<body>

<p>Name: <input type="text" id="fname"></p>
<p id="pete" style="display:none;" >Pete</p>

</body>
</html>

Answer 1

欢迎来到SO。你非常接近，你可以修改你的代码，如下所示：(this.value == "Kasey" || this.value == "KASEY) ? "block" : "none"

以下示例使用indexOf。我已创建了一系列可能的值，然后使用indexOf()检查数组中是否存在类型值。

$(document).ready(function () {
    var acceptedValues = ["Kasey", "KASEY"];
    $("#fname").keyup(function () {
        $("#pete").css("display", (acceptedValues.indexOf(this.value) != -1) ? "block" : "none");
    });
});

Answer 2

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>

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

</script>


</head>
<body>

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

</body>
</html>

Answer 3

全部谢谢

此代码完美无缺

	  $(document).ready(function () {
    $("#country").keyup(function () {
        $("#question").css("display", this.value == "france" || this.value == "France"  ? "block" : "none");
		$("#reponse").css("display", this.value == "france" ? "block" : "none");
    });
});

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

3 个答案: