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

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

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

if input value equals specific text, display

if-statement

input

equals