为什么单击锚点时 Jquery 不为 <divs> 提供折叠的类？答案

【问题标题】：Why isn't Jquery giving the <divs> the collapsed class when the anchors are clicked on?为什么单击锚点时 Jquery 不为 <divs> 提供折叠的类？
【发布时间】：2021-10-13 04:17:05
【问题描述】：

我正在制作一个登录/注册网页，并希望在您单击注册或登录锚点时在两者之间切换。为此，我使用的是 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>

【问题讨论】：

您能否解释一下点击功能，您在点击每个锚标记时尝试将类添加到哪个。如果可以的话，给他们起个名字。
我在 Jquery 方面不是最好的，如果我不能解释最好的，很抱歉。我试图将折叠的类添加到它的第三个父级，这将成为
你有一个定义为折叠的类吗？这些功能似乎工作正常？我唯一的猜测是你的类是错误的或没有定义。如果您包含相关的 CSS，将会有所帮助。
.collapsed { 显示：无； }
jsfiddle.net/wLms4jne - 我没有对你的代码做任何事情，而且似乎工作正常。我的猜测可能是您正在查看您的编码页面？您是否检查过控制台是否有任何错误？

标签： html jquery dreamweaver

【解决方案1】：

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

代码运行良好。

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

【讨论】：

【解决方案2】：

试试这个代码

$(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');
    });
});

【讨论】：

我试过你的代码，但它似乎仍然不起作用。
错误与您的代码无关。
什么意思？
查看我的其他评论和链接。
如果类折叠 => .collapsed { display: none; }。然后，您也可以使用 show() 或 hide() 来代替 addclass 和 removeclass

【解决方案3】：

您可能必须使用正确的 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 可以非常注重正确的编码和格式等。

【讨论】：

是的，我有，只是没有在代码中显示。抱歉，这不是问题。还有什么要编码的？
如果您必须使用 Dreamweaver，那么我们应该专注于让它发挥作用。
我已经更新了代码。再试一次。您会注意到我稍微更改了<script> 标记中的 URL。
Notepad++ 或者 Visual Studio Code 都是我用的，而且都是免费的。
感谢您的帮助，我现在就结束这个问题。我真的很感激。