檢查JQuery中的條件時，Boostrap模式框未顯示

Question

這是我的JQuery代碼

$(document).ready(function()
{
    $("#pincode-check").click(function()
        {
            var pincode = $("#pincode").val();

            if(pincode == "" || pincode == null)
                {
                    var data = "<div class='modal-dialog'>"+
                                    "<div class='modal-content'>"+
                                        "<div class='modal-header' align='center'>"+
                                            "<h3 class='modal-title'>UNCBroadband - Pincode Status</h3>"+
                                        "</div>"+
                                        "<div class='modal-body'>"+
                                            "Please Enter A Valid Pincode. The pincode you have entered is <b>Blank</b> or <b>Invalid</b>"+
                                        "</div>"+
                                        "<div class='modal-footer'>"+
                                            "<button class='btn btn-primary' type='button' data-dismiss='modal'>Close!</button>"+
                                        "</div>"+
                                    "</div>"+
                                "</div>";
                                $('#pincode-modal').html(data);
                                $('#pincode-modal').modal('show');
                }

            if(pincode == "400607" || pincode == "444605")
                {
                    var data = "<div class='modal-dialog'>"+
                                    "<div class='modal-content'>"+
                                        "<div class='modal-header' align='center'>"+
                                            "<h3 class='modal-title'>UNCBroadband - Pincode Status</h3>"+
                                        "</div>"+
                                        "<div class='modal-body'>"+
                                        "</div>"+
                                        "<div class='modal-footer'>"+
                                            "<button class='btn btn-primary' type='button' data-dismiss='modal'>Close!</button>"+
                                        "</div>"+
                                    "</div>"+
                                "</div>";
                                $('#pincode-modal').html(data);
                                $('#pincode-modal').modal('show');
                }

            else
                {
                    var data = "<div class='modal-dialog'>"+
                            "<div class='modal-content'>"+
                                "<div class='modal-header' align='center'>"+
                                    "<h3 class='modal-title'>UNCBroadband - Pincode Status</h3>"+
                                "</div>"+
                                "<div class='modal-body'>"+
                                    "We do not currently supply broadband connection in your area. You can visit our contact page & leave us a feedback."+
                                    "<br /><br /><a href='http://www.uncbroadband.com/contact' title='unc'>Click here to visit Contact Us Page!</a>"+
                                "</div>"+
                                "<div class='modal-footer'>"+
                                    "<button class='btn btn-primary' type='button' data-dismiss='modal'>Close!</button>"+
                                "</div>"+
                            "</div>"+
                        "</div>";
                        $('#pincode-modal').html(data);
                        $('#pincode-modal').modal('show');
                }   
        });
});

這是我的HTML代碼

<div class="display-tc animate-box" data-animate-effect="fadeIn">
    <h1 class="main-title">We connect you to the internet world. Quick setup & dazzling speed than any other providers</h1>
    <h2>Enter Your Pincode Below To Check Connection Delivery Status!</h2>
    <div class="row">
        <form class="form-inline" id="fh5co-header-subscribe">
            <div class="col-md-6 col-md-offset-3">
                <div class="form-group">
                    <input type="text" class="form-control" id="pincode" placeholder="Enter Your Pincode Here!">
                    <button type="submit" id="pincode-check" class="btn btn-default">Check Status!</button>
                </div>
            </div>
        </form>
    </div>
</div>

在scripts.php中的腳本代碼中，我添加了一個代碼來停止提交表單：

<script>
  $(document).on("submit", false);
</script>

問題是每當我每次通過else塊執行時，無論何時我輸入輸入，但只有else塊正在執行，我都會通過JQuery在默認情況下通過JQuery檢查pin碼的條件。

我已經提醒了該值，該值正在警報框中顯示，但是我不明白為什么JQuery無法理解它。

請幫忙。 提前致謝

Answer 1

使用的else if后，你的第一個if以妨礙兩個模態打開。

 $(document).ready(function() { $("#pincode-check").click(function() { var pincode = $("#pincode").val(); if (pincode == "" || pincode == null) { var data = "<div class='modal-dialog'>" + "<div class='modal-content'>" + "<div class='modal-header' align='center'>" + "<h3 class='modal-title'>UNCBroadband - Pincode Status</h3>" + "</div>" + "<div class='modal-body'>" + "Please Enter A Valid Pincode. The pincode you have entered is <b>Blank</b> or <b>Invalid</b>" + "</div>" + "<div class='modal-footer'>" + "<button class='btn btn-primary' type='button' data-dismiss='modal'>Close!</button>" + "</div>" + "</div>" + "</div>"; $('#pincode-modal').html(data); $('#pincode-modal').modal('show'); }else if (pincode == "400607" || pincode == "444605") { var data = "<div class='modal-dialog'>" + "<div class='modal-content'>" + "<div class='modal-header' align='center'>" + "<h3 class='modal-title'>UNCBroadband - Pincode Status</h3>" + "</div>" + "<div class='modal-body'>" + "</div>" + "<div class='modal-footer'>" + "<button class='btn btn-primary' type='button' data-dismiss='modal'>Close!</button>" + "</div>" + "</div>" + "</div>"; $('#pincode-modal').html(data); $('#pincode-modal').modal('show'); } else { var data = "<div class='modal-dialog'>" + "<div class='modal-content'>" + "<div class='modal-header' align='center'>" + "<h3 class='modal-title'>UNCBroadband - Pincode Status</h3>" + "</div>" + "<div class='modal-body'>" + "We do not currently supply broadband connection in your area. You can visit our contact page & leave us a feedback." + "<br /><br /><a href='http://www.uncbroadband.com/contact' title='unc'>Click here to visit Contact Us Page!</a>" + "</div>" + "<div class='modal-footer'>" + "<button class='btn btn-primary' type='button' data-dismiss='modal'>Close!</button>" + "</div>" + "</div>" + "</div>"; $('#pincode-modal').html(data); $('#pincode-modal').modal('show'); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="display-tc animate-box" data-animate-effect="fadeIn"> <h1 class="main-title">We connect you to the internet world. Quick setup & dazzling speed than any other providers</h1> <h2>Enter Your Pincode Below To Check Connection Delivery Status!</h2> <div class="row"> <form class="form-inline" id="fh5co-header-subscribe"> <div class="col-md-6 col-md-offset-3"> <div class="form-group"> <input type="text" class="form-control" id="pincode" placeholder="Enter Your Pincode Here!"> <button type="submit" id="pincode-check" class="btn btn-default">Check Status!</button> </div> </div> </form> </div> <div id="pincode-modal" class="modal fade" tabindex="-1" role="dialog"></div> </div>