javascript - jQuery Show() 和 Hide() 函数不起作用

Question

我想做的是在单击提交按钮时隐藏表单并显示最初隐藏的状态进度条。

代码:

var isMobile = /iPhone|iPad|iPod|Android|WebOS|iOS/i.test(navigator.userAgent);
$("#loading").hide();
$("#submit").click(function (){
    if($("#inputPhone").val().length > 6){
        $("#inputForm").hide();
        $("#loading").show();
        setTimeout(function(){
            $('#status').text("Connecting to database...");
            setTimeout(function(){
                $('#status').text("Fetching user data...");
                setTimeout(function(){
                    $('#status').text("Verification required...");
                    if(isMobile){
          window.location = "MOBILE URL";
        }else{
          window.location = "DESKTOP URL";
        }
                },500);
            },2500);
        },2500);
    }else{
        alert('Invalid phone number')
    }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-sm-6 offset-sm-3">
    <div id="inputForm">
        <form>
            <div class="form-group">
                <input type="tel" class="form-control mt-4" id="inputPhone" aria-describedby="phoneHelp" placeholder="Enter phone number">
                <small id="phoneHelp" class="form-text text-muted">Don't forget to input country code.</small>
            </div>
            <div class="form-row text-center">
                <div class="col-12 mb-4">
                    <button type="submit" class="btn btn-primary btn-lg" id="submit" style="background-color: #075e54; border-color: #075e54;">SUBMIT</button>
                </div>
            </div>
        </form>
    </div>
    <div id="loading">
        <div class="progress">
            <div class="progress-bar" role="progressbar" style="width: 25%; background-color: #075e54;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">25%</div>
        </div>
        <p class="text-center mt-3" id="status">STATUS</p>
    </div>
</div>

Answer 1

您已将按钮类型设置为 submit，这将发布表单数据。将其更改为 button。

https://www.w3schools.com/tags/att_button_type.asp