登录
当前位置： 首页 > 知识库问答 >
问题：

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

胡高朗
2023-03-14

我有一个功能，会显示其他内容和隐藏最近的内容。但当我单击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个答案

羊舌洛华
2023-03-14 
$(function(){
  $('.btn .button').on('click', function(e){
    e.preventDefault();
    $('.container').hide()
    $('.container-two').show()
  })
})
陈夜洛
2023-03-14

首先，将第一个提交类型输入更改为按钮。而不是应为这将阻止表单提交，并将缺少的“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>
 类似资料：
  • 为什么即使我没有实现必要的功能，Parcelable也能工作呢？

    我希望在屏幕旋转期间保留一个复杂的java对象，因此我使该对象可打包并实现了必要的方法： 在writeToParcel（Parcel dest,int flags）方法中，我将一些值保存到“dest”。 在Parcelable.Creator的createFromParcel（Parcel source）方法中，我以正确的顺序从“source”中获取了值，并返回了相应的对象。 然后在Fragmen

  • 为什么即使JUnit4在我的有效pom.xml中也不能识别JUnit4导入？

    我的Eclipse项目中出现了如下构建错误： 但是如果您看到了有效的pom.xml，那么JUnit4依赖项就存在了： 如果将此依赖项显式添加到中，则错误将消失。 为什么会这样呢？如果它已经在那里，不应该使用它吗？ 这是我的

  • ng-if和ng-show / ng-hide有什么区别

    问题内容： 我试图了解和/ 之间的区别，但对我来说它们看起来相同。 我应该记住使用一个或另一个来区别吗？ 问题答案： ngIf 该指令根据表达式 删除或重新创建 DOM树的一部分。如果赋值为的表达式的计算结果为假值，则将元素从DOM中删除，否则将元素的克隆重新插入DOM中。 删除元素时，使用它的作用域将被销毁，并在恢复该元素时创建一个新的作用域。在内部创建的作用域使用原型继承从其父作用域继承。 如

  • angular中ng一if和ng-show/hide 有什么区别？

    本文向大家介绍angular中ng一if和ng-show/hide 有什么区别？相关面试题，主要包含被问及angular中ng一if和ng-show/hide 有什么区别？时的应答技巧和注意事项，需要的朋友参考一下 1．ng一if 在后面表达式为 true 的时候才创建这个 dom 节点，ng一show 是初始时就创建了，用 display:block 和 display:none 来控制显示和不

  • 为什么即使我安装了setuptools，“pip install-e”也会给我一个“没有名为“setuptool”的模块”错误？

    我试图通过在conda环境中安装一个正在进行的工作包作为一个可编辑的包，但是我得到了一个“没有名为‘setup工具’的模块”，即使我已经验证了setup工具是否正确安装在环境中（我可以在环境中的python会话中导入它）。 我有一个最小的＜code＞设置。py＜/code＞： 关于如何解决此问题并以可编辑状态安装我的软件包的任何建议？我也看了这个堆栈溢出问题，但没有找到适合我的情况的答案。 下面是

  • 为什么即使我在传递规则，也会收到CSP frame src错误？

    我收到错误信息： 拒绝https://oauth.telegram.org/，因为它违反了以下内容安全策略指令：frame-srchttps://outh.telegram.org 我相信我已经正确地设置了我的内容安全策略规则。怎么还被封了？

相关问答

为什么我有错误，但没有异常？ng if和ng show/ng hide之间有什么区别PHP错误：为什么这不工作，我不能在我的页面中看到数据结果？即使代码没有错误，我也无法模拟CPLEX模型为什么即使在Java中使用close（）方法，也会出现“Resource leak:””错误？

相关文章

为什么此jQuery Ajax调用仅在IE9中失败（即使在IE8和IE7中也可以正常工作）为什么即使不应该执行，T-SQL块也会给出错误？为什么即使我在JSFiddle中声明ng-app =“ MyApp”，我也需要angular.bootstrap为什么我不能在jQuery的document.ready（）中定义函数？浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别

相关阅读

为什么使用CouchDB？为什么使用DevOps？没实习的情况下还有什么和92✌竞争的资本JWT和token有什么区别？SQL是什么？它能做什么？

相关工具

jQuery Scroll ShowHide Slide ViewShow SlowShow More TableView我有计划

相关文档

Python 人工智能我的职业是前端工程师如流智能工作台帮助文档前端工程师自我修养人工智能会取代人类吗？
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.