Question

我试图隐藏div（class =“login-form”），直到使用jQuery在我的HTML页面上按下Login按钮。但是，当我单击按钮时，不会显示登录表单。这是为什么？

谢谢！

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>

Stylus（一种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

Answer 1

SOLUTION：第二个.click（）函数（对于#create-account）缺少函数中的括号。它起作用了。

Answer 2

请检查您的代码，您忘了写＆＃34;（）＆＃34; for function＃create-account

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

Answer 3

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

$(document).ready(function() {
    $("#login").click(function(){
        $('.login-form').show();
    });

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

.show（）在单击按钮时不起作用

3 个答案: