Jquery 文本函数只能运行两次

Question

我尝试多次运行此脚本，但它只运行两次。

它应该做的是..在文本框中输入城市名称，然后提交，然后就会发生一个功能。但只有效两次

这是我尝试过的......

<style type="text/css">
    body {
        background-color: #6A6A6A;
    }

    .tim1 {
        background-color: #000000;
        position: absolute;
        top: 40px;
        left: 10px;
        width: 100px;
        height: 100px;
        display: none;
    }

    .tim2 {
        background-color: #525119;
        position: absolute;
        top: 40px;
        left: 10px;
        width: 100px;
        height: 100px;
        display: none;
    }
</style>


<input type="text" id="pass"> <input type="button" id="b" value="Guess">
<div class="tim1"></div>
<div class="tim2"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $("#b").click(function () {
        var password = "toronto";
        if ($("#pass").val() == password) {
            $(".tim1").css({ "display": "block" });
            return true;
        }

    });
    $("#b").click(function () {
        var password = "ottawa";
        if ($("#pass").val() == password) {
            $(".tim2").css({ "display": "block" });
            return true;
        }

    });
</script>

Answer 1

您已为

#b

分配了两个点击处理程序，这可能是您感到沮丧的一个根源。您可以将它们与简单的

else-if

：

结合起来

$("#b").click(function () {
    var password = $("#pass").val();
    if (password == "toronto") {
        $(".tim1").css({ "display": "block" });
    } else if (password == "ottawa") {
        $(".tim2").css({ "display": "block" });
    }
});