为什么单击锚点时 Jquery 不给 <divs> 折叠的 class？

Question

我正在制作一个 login/register 网页，当您单击“注册”或“登录”锚点时，我想在两者之间切换。为此，我正在使用 Jquery，但我无法弄清楚为什么它没有运行该功能。我已经组织了登录并使用

$(document).ready(function() {

    $("div #register").addClass('collapsed');
    
    $('#form a').click(function(event) {

        event.preventDefault();
        $(event.target).parent().parent().parent().addClass('collapsed');
        $(event.target).parent().parent().parent().siblings().removeClass('collapsed');

        document.title = $(event.target).attr('id');
    });
});

.collapsed {
    display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="form">
            <div id="register" class="">
                <h2>Register</h2>
                <form action="login_register.php" method="post">
                    <span>Have an account? <a id="Login" class="change" href="#login" >Login</a></span><br>
                    <div id="half-left" class="textbox">
                        <input type="text" placeholder="First Name" name="firstname" required autocomplete="off">
                    </div>
                    <div id="half-right" class="textbox">
                        <input type="text" placeholder="Last Name" name="lastname" required autocomplete="off">
                    </div>
                    <div class="textbox">
                        <input type="text" placeholder="Email" name="email" required autocomplete="off">
                    </div>
                    <div class="textbox">
                        <input type="password" placeholder="Password" name="password" required autocomplete="off">
                    </div>
                </form>
            </div>
            <div id="login" class="">
                <h2>Login</h2>
                <form action="login_register.php" method="post">
                    <span>Don't have an account? <a id="Register" class="change" href="#register" >Register</a></span><br>
                    <div class="textbox">
                        <input type="text" placeholder="Email" name="email" required autocomplete="off">
                    </div>
                    <div class="textbox">
                        <input type="password" placeholder="Password" name="password" required autocomplete="off">
                    </div>
                    <span class="password">Forgot <a href="#">password?</a></span>
                </form>
            </div>
        </div>

Answer 1

试试这个代码

$(document).ready(function() {

    $("#register").hide();
    
    $('#form a').click(function(event) {

        event.preventDefault();
        let id = $(this).attr("id");
        if (id === "Login"){
         $("#login").show();
         $("#register").hide();
        }
        else if(id === "Register"){
          $("#login").hide();
          $("#register").show();
       }
        

        document.title = $(this).attr('id');
    });
});

Answer 2

您可能必须使用正确的 HTML 格式，即；正确使用 <HTML> 和 <head> 等作为 Dreamweaver 可能非常特别。

所以试着把它改成类似的东西；

$(document).ready(function() {

    $("div #register").addClass('collapsed');
    
    $('#form a').click(function(event) {

        event.preventDefault();
        $(event.target).parent().parent().parent().addClass('collapsed');
        $(event.target).parent().parent().parent().siblings().removeClass('collapsed');

        document.title = $(event.target).attr('id');
    });
});

.collapsed { display: none; }

<!DOCTYPE html>
<html>
    <head>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
    <body>
        <div id="form">
            <div id="register" class="">
                <h2>Register</h2>
                <form action="login_register.php" method="post">
                    <span>Have an account? <a id="Login" class="change" href="#login" >Login</a></span><br>
                    <div id="half-left" class="textbox">
                        <input type="text" placeholder="First Name" name="firstname" required autocomplete="off">
                    </div>
                    <div id="half-right" class="textbox">
                        <input type="text" placeholder="Last Name" name="lastname" required autocomplete="off">
                    </div>
                    <div class="textbox">
                        <input type="text" placeholder="Email" name="email" required autocomplete="off">
                    </div>
                    <div class="textbox">
                        <input type="password" placeholder="Password" name="password" required autocomplete="off">
                    </div>
                </form>
            </div>
            <div id="login" class="">
                <h2>Login</h2>
                <form action="login_register.php" method="post">
                    <span>Don't have an account? <a id="Register" class="change" href="#register" >Register</a></span><br>
                    <div class="textbox">
                        <input type="text" placeholder="Email" name="email" required autocomplete="off">
                    </div>
                    <div class="textbox">
                        <input type="password" placeholder="Password" name="password" required autocomplete="off">
                    </div>
                    <span class="password">Forgot <a href="#">password?</a></span>
                </form>
            </div>
        </div>
    </body>
</html>

Dreamweaver 在适当的编码和格式等方面非常讲究

Answer 3

需要旧版本 Jquery 才能在 Dreamweaver 上运行。

代码运行良好。

这是一个应该可以使用的旧版本：jQuery actions (in general) not working -Dreamweaver

为什么单击锚点时 Jquery 不给 <divs> 折叠的 class？

Why isn't Jquery giving the <divs> the collapsed class when the anchors are clicked on?

html

jquery

dreamweaver