为什么我的hide()和show()即使在JQuery中没有错误也不能工作

Question

我有一个函数，它将显示其他内容并隐藏最近的内容。但当我点击提交输入时，它不起作用。我试着使用锚标记和按钮标记，它有相同的输出。

html:

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

我试着使用addClass()和removeClass()，还有css()，但什么都没发生。我也找到了答案，但与我的问题完全不同。

Answer 1

首先，将第一个提交类型的输入更改为按钮。代替<input type="submit" name="submit" value="Continue" class="button">应为<button class="button" type="button">Continue</button>这将阻止表单提交，并添加缺失的"；按钮"；类到按钮。

然后修改jquery代码如下：

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

我的回答是基于这样的假设，即你想在按下第一个"之后显示第二个容器；继续"；按钮

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

Answer 2

我将代码复制并粘贴到codepen，发现他试图显示已经可见的div，并试图隐藏已经隐藏的div，因此将hide()和show()相互替换。

阻止默认提交事件，并在正确的divs上添加hide()和show()

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