Question

这是我的JQuery代码

temp3x = pd.crosstab(df['Credit_History'], df['Loan_Status', 'Gender']) 
temp3x.plot(kind = 'bar', stacked = True, color = ['red', 'blue'], grid = False)
print(temp3)

这是我的HTML代码

$(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');
                }   
        });
});

在scripts.php的脚本代码中，我添加了一个代码来停止提交表单：

<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>

问题在于，每当我通过JQuery检查条件时，默认情况下每次执行else块都会执行，无论我输入什么输入但是只有else块正在执行。

我已警告该值，该值正在警告框中显示，但我不明白为什么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>

Boostrap Modal Box在检查JQuery中的条件时不显示

1 个答案: