.show()在按钮被点击时不工作

.show() not working when button is clicked

本文关键字：工作 按钮 show      更新时间：2023-09-26

我试图隐藏一个div (class=" Login -form")，直到登录按钮按下我的HTML页面使用jQuery。但是，当我单击按钮时，登录表单不显示。为什么会这样?

谢谢!

HTML ---------------------------------------------------------------------------

<?php /* Template Name: Virtual-tour */ ?>
<head>
<link rel="stylesheet" href="stylus/main.css"/>
<link href='https://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- <script src=js/showLogin.js></script>
<script src=js/showCreateAccount.js></script>
<script src=js/submitLogin.js></script>
<script src=js/submitCreateAccount.js></script>
<script src=js/validate.js></script> -->
</head>
<body>
<div class="virtual-tour-media-player">
    <span> placeholder for media player</span>
</div>
<div class="instructions">
    Are you a family member or friend of a veteran on this memorial?</br></br>
    <span id="instruction-sub">
        Login or Create Account below to add additional information and memories.</br>
    </span>
    <button id="login">Login</button>
    <button id="create-account">Create Account</button>
</div>
<div class="login-form">
    <form>
        <input type="text" placeholder="Email Address" />
        <input type="password" placeholder="Password" />
    </form>
</div>
<script>
    $(document).ready(function() {
        $("#login").click(function(){
            $('.login-form').show();
        });
        $('#create-account').click(function{
            $(".create-account-form").show();
        });
    });
</script>

针(CSS预处理器,CSS语法非常相似 )---------------------------------------------------

body
    color #ffffff
    background-color #292929
    font-family 'Alegreya Sans', sans-serif
.virtual-tour-media-player
    width 90%
    height 40%
    margin auto
    border 3px solid white
.instructions
    padding-top 30px
    margin auto
    margin-top 5%
    font-size 100%
    width 45%
    height 22%
    text-align center
    background-color #740600
    box-shadow 2px 2px 2px 2px #232421
#instruction-sub
    font-size 15px
    //color #4d4d4d
button
    line-height 1.8
    border none
    color #f1f1f1
    background-color #0c083e
    margin auto
    margin-top 10%
    width 40%
    height 15%

button:hover
    background-color #292929
.login-form
    display none

解决方案:第二个.click()函数(用于#create-account)缺少函数中的圆括号。反之亦然。

请检查您的代码，您忘记为function #create-account写入"()" 

$('#create-account').click(function(){
    $(".create-account-form").show();
});

在您的$("#create-account.click(function ")中添加缺少的括号，它将工作

$(document).ready(function() {
    $("#login").click(function(){
        $('.login-form').show();
    });
    $('#create-account').click(function{ <---- missing "()"
        $(".create-account-form").show();
    });
});
相关文章：