1. 首页
  2. 问题列表
  3. 为什么我的hide（）和show（）在jQuery中即使没有错误也不能工作？
提问者：小点点

为什么我的hide（）和show（）在jQuery中即使没有错误也不能工作？


我有一个功能，会显示其他内容和隐藏最近的内容。但当我单击submit输入时，它就不工作了。我尝试使用锚标记和按钮标记，它有相同的输出。

HTML：

null

$(function(){
            $('.btn .button').on('click', function(){
                $('.container').show()
                $('.container-two').hide()

            })
        })
* {
    text-decoration: none;
}

body {
    background: #8390A2;
}

.student {
    padding-top: 10px;
    padding-bottom: 20px;
}

.form .student div {
    padding: 10px;
}

.form .student div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.student-name {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
    padding: 10px;
}

.form .student-name div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.title-header {
    border-top-right-radius: 10%;
    border-top-left-radius: 10%;
    border-bottom: 1px solid grey;
    height: 40px;
    background: #efefef;
}

.title-header h3 {
    text-align: center;
    padding: 9px;
}

.form form div .info {
    position: relative;
}


.form .info label {
    position: absolute;
    color: grey;
    pointer-events: none;
    top: 36px;
    left: 15px;
    transition: 0.5s ease;
}

.form .info input:focus ~ label {
    transform: translateY(-20px);
    color: black;
}

.form .info input {
    outline: none;
    border: none;
    border-bottom: 1px solid silver;
    padding-top: 20px;
}

.form .student div:first-child input {
    width: 95%;
}

.form .info input:focus {
    border-color: #4CCEE8;
}

.form .btn {
    position: absolute;
    padding-top: 50px;
    right: 36.5%;
}

.form .btn input,
.form-two .btn input {
    border-radius: 15px;
    outline: none;
    width: 100px;
    height: 40px;
}

.form-two .address div {
    padding: 10px;
}

.address .info-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.form-two .student-info div {
    padding: 10px;
}

.form-two .student-info div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.form-two .address div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.form-two .student-info div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.form-two form div .info {
    position: relative;
}


.form-two .info label {
    position: absolute;
    color: grey;
    pointer-events: none;
    top: 36px;
    left: 15px;
    transition: 0.5s ease;
}

.form-two .info input:focus ~ label {
    transform: translateY(-20px);
    color: black;
}

.form-two .info input {
    outline: none;
    border: none;
    border-bottom: 1px solid silver;
    padding-top: 20px;
}

.form-two .address div:first-child input {
    width: 95%;
}

.form-two .address div:last-child div {
    padding-left: 1px;
}

.form-two .address div:last-child div label {
    left: 8px;
}

.form-two .info input:focus {
    border-color: #4CCEE8;
}

.form-two .btn {
    position: absolute;
    padding-top: 14px;
    right: 36.5%;
}

.active {
    display: none;
}

main {
    border-radius: 1%;
    background: #f1f5f9;
    width: 27rem;
    min-height: 30rem;
    margin: auto;
    margin-top: 13rem;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}

form h4 {
    margin: 10px;
}


@media only screen and (max-width: 1366px) {
    main {
    background: #f1f5f9;
    width: 27rem;
    min-height: 30rem;
    margin: auto;
    margin-top: 5rem;
    }   
}   
<div class="container">
        <main>
            <div class="form">
                <div class="title-header">
                    <h3>Personal Data Information</h3>
                </div>
                <form action="" method="POST">
                    <div class="student">
                        <div class="info">
                            
                            <input type="text" name="Program">
                            <label>Program</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Student #">
                            <label>Student #</label>
                        </div>
                    </div>
                    <h4>Student Name</h4>
                    <div class="student-name">
                        <div class="info">
                            
                            <input type="text" name="Surname" id="surname">
                            <label>Surname</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Given Name" id="givenname">
                            <label>Given Name</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Middle Name" id="middlename">
                            <label>Middle Name</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Auxillary Name" id="auxillaryname">
                            <label>Auxillary Name</label>
                        </div>
                    </div>
                    <div class="btn">
                        <input type="submit" name="submit" value="Continue" class="button">
                    </div>
                </form>
            </div>
        </main>
    </div>

    <div class="container-two active">
        <main>
            <div class="form-two">
                <div class="title-header">
                    <h3>Personal Data Information</h3>
                </div>
                <form action="" method="POST">
                    <h4>Address</h4>
                    <div class="address">
                        <div class="info">
                            
                            <input type="text" name="City Address">
                            <label>City Address</label>
                        </div>
                        <div class="info-two" style="padding: 0px;">
                            <div class="info">
                                
                                <input type="text" name="Student #" style="width: 70%;">
                                <label>Zip Code</label>
                            </div>
                            <div class="info">
                                
                                <input type="text" name="Student #" style="width: 70%;">
                                <label>Tel no.</label>
                            </div>
                        </div>
                        <div class="info">
                            
                            <input type="email" name="Student #" style="width: 95%;">
                            <label>Email Address</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="City Address" style="width: 95%;">
                            <label>Home Address</label>
                        </div>
                        <div class="info">
                                
                            <input type="text" name="Student #" style="width: 34%;">
                            <label>Zip Code</label>
                        </div>
                    </div>
                    <div class="btn">
                        <input type="submit" name="submit" value="Continue">
                    </div>
                </form>
            </div>
        </main>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" charset="utf-8"></script>

null

我尝试使用AddClass()和RemoveClass()以及CSS()，但没有发生任何事情。我也找到了一个答案，但不像我的问题。


共2个答案

匿名用户

首先，将第一个提交类型输入更改为按钮。而不是应为这将阻止表单提交，并将缺少的“button”类添加到按钮中。

然后像这样修改jquery代码：

$(function(){
  $('.btn .button').on('click', function(e){
    $('.container').hide()
    $('.container-two').show()
  })
})

我的回答是基于这样的假设：您希望在按下第一个“Continue”按钮后显示第二个容器。

null

$(function(){
  $('.btn .button').on('click', function(e){
    $('.container').hide();
    $('.container-two').show();
  });
});
* {
    text-decoration: none;
}

body {
    background: #8390A2;
}

.student {
    padding-top: 10px;
    padding-bottom: 20px;
}

.form .student div {
    padding: 10px;
}

.form .student div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.student-name {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.form .student-name div {
    padding: 10px;
}

.form .student-name div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.title-header {
    border-top-right-radius: 10%;
    border-top-left-radius: 10%;
    border-bottom: 1px solid grey;
    height: 40px;
    background: #efefef;
}

.title-header h3 {
    text-align: center;
    padding: 9px;
}

.form form div .info {
    position: relative;
}


.form .info label {
    position: absolute;
    color: grey;
    pointer-events: none;
    top: 36px;
    left: 15px;
    transition: 0.5s ease;
}

.form .info input:focus ~ label {
    transform: translateY(-20px);
    color: black;
}

.form .info input {
    outline: none;
    border: none;
    border-bottom: 1px solid silver;
    padding-top: 20px;
}

.form .student div:first-child input {
    width: 95%;
}

.form .info input:focus {
    border-color: #4CCEE8;
}

.form .btn {
    position: absolute;
    padding-top: 50px;
    right: 36.5%;
}

.form .btn input,
.form-two .btn input {
    border-radius: 15px;
    outline: none;
    width: 100px;
    height: 40px;
}

.form-two .address div {
    padding: 10px;
}

.address .info-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.form-two .student-info div {
    padding: 10px;
}

.form-two .student-info div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.form-two .address div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.form-two .student-info div input {
    background: #f1f5f9;
    margin-top: 5px;
    height: 20px;
}

.form-two form div .info {
    position: relative;
}


.form-two .info label {
    position: absolute;
    color: grey;
    pointer-events: none;
    top: 36px;
    left: 15px;
    transition: 0.5s ease;
}

.form-two .info input:focus ~ label {
    transform: translateY(-20px);
    color: black;
}

.form-two .info input {
    outline: none;
    border: none;
    border-bottom: 1px solid silver;
    padding-top: 20px;
}

.form-two .address div:first-child input {
    width: 95%;
}

.form-two .address div:last-child div {
    padding-left: 1px;
}

.form-two .address div:last-child div label {
    left: 8px;
}

.form-two .info input:focus {
    border-color: #4CCEE8;
}

.form-two .btn {
    position: absolute;
    padding-top: 14px;
    right: 36.5%;
}

.active {
    display: none;
}

main {
    border-radius: 1%;
    background: #f1f5f9;
    width: 27rem;
    min-height: 30rem;
    margin: auto;
    margin-top: 13rem;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2)
}

form h4 {
    margin: 10px;
}


@media only screen and (max-width: 1366px) {
    main {
    background: #f1f5f9;
    width: 27rem;
    min-height: 30rem;
    margin: auto;
    margin-top: 5rem;
    }   
}   
<div class="container">
        <main>
            <div class="form">
                <div class="title-header">
                    <h3>Personal Data Information 1</h3>
                </div>
                <form action="" method="POST">
                    <div class="student">
                        <div class="info">
                            
                            <input type="text" name="Program">
                            <label>Program</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Student #">
                            <label>Student #</label>
                        </div>
                    </div>
                    <h4>Student Name</h4>
                    <div class="student-name">
                        <div class="info">
                            
                            <input type="text" name="Surname" id="surname">
                            <label>Surname</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Given Name" id="givenname">
                            <label>Given Name</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Middle Name" id="middlename">
                            <label>Middle Name</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="Auxillary Name" id="auxillaryname">
                            <label>Auxillary Name</label>
                        </div>
                    </div>
                    <div class="btn">
                    <button class="button" type="button">Continue</button>
                    </div>
                </form>
            </div>
        </main>
    </div>

    <div class="container-two active">
        <main>
            <div class="form-two">
                <div class="title-header">
                    <h3>Personal Data Information 2</h3>
                </div>
                <form action="" method="POST">
                    <h4>Address</h4>
                    <div class="address">
                        <div class="info">
                            
                            <input type="text" name="City Address">
                            <label>City Address</label>
                        </div>
                        <div class="info-two" style="padding: 0px;">
                            <div class="info">
                                
                                <input type="text" name="Student #" style="width: 70%;">
                                <label>Zip Code</label>
                            </div>
                            <div class="info">
                                
                                <input type="text" name="Student #" style="width: 70%;">
                                <label>Tel no.</label>
                            </div>
                        </div>
                        <div class="info">
                            
                            <input type="email" name="Student #" style="width: 95%;">
                            <label>Email Address</label>
                        </div>
                        <div class="info">
                            
                            <input type="text" name="City Address" style="width: 95%;">
                            <label>Home Address</label>
                        </div>
                        <div class="info">
                                
                            <input type="text" name="Student #" style="width: 34%;">
                            <label>Zip Code</label>
                        </div>
                    </div>
                    <div class="btn">
                        <input type="submit" name="submit" value="Continue">
                    </div>
                </form>
            </div>
        </main>
    </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

匿名用户 

$(function(){
  $('.btn .button').on('click', function(e){
    e.preventDefault();
    $('.container').hide()
    $('.container-two').show()
  })
})

相关问题



热门标签
Java JavaScript Python PHP C# Android Html jQuery C++ Css IOS MySQL NodeJS