导航栏中的登录/注销按钮和文本 - 与 javascript 冲突

问题描述 投票：0回答：1

我的index.html 上有一个文本和按钮，用于检查某人是否已登录，以便有人可以在登录时签出。因此，首先总是有一条文本显示“未登录”，当我登录时，有一个注销按钮，当您按下它时，您将被注销。它在索引页面上工作得很好，但我想把它放在导航栏中的人物图标旁边，但当我把它放在导航栏中时，它根本不起作用。我发现这是因为 javascript 干扰，因为我的导航栏也加载了 javascript 和 jquery。必须有某种方式说我的导航栏应该首先加载，然后是注销脚本或其他东西。

这是我的索引页 html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>guapo.</title>

    <link rel="icon" href="images/clementine.png" sizes="16x16 32x32" type="image/png" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.3.js"
        integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/stylesheet.css" />
</head>

<body>

    <div id="navbar"></div>
    <p id="loggedInMessage">Not logged in</p>
    <div id="logoutContainer">
        <button type="button" class="btn btn-light" onclick="logout()">Logout</button>
    </div>
    <div class="container content">
        <div class="row">
            <div class="col-lg-5 col-sm-12" style="text-align:center; margin-top: 60px;">
                <h1 style="font-style: italic;">Where Green Dreams grow. <b> guapo. </b></h1>
                <h5 style="margin-top: 30px;">Willkommen in unserer Pflanzenwelt, in der jedes Blatt eine Geschichte von
                    Leben und Schönheit erzählt. Entdecken Sie unsere grüne Oase und holen Sie sich die Wunder der Natur
                    in Ihr Zuhause!</h5>
                <a href="alle-produkte.html"><button type="button" class="btn btn-light"
                        style="color: rgb(184, 107, 82); margin-top: 20px;">Alle Produkte</button></a>
            </div>

            <div class="col-lg-7 col-sm-12" style="text-align: center;">
                <img class="img-fluid" src="images/plants.png" alt="illustration of plants"
                    style="width: 600px 100% \9;">
            </div>
        </div>
    </div>

    <div id="footer"></div>
    <script src="./javascript/main.js"></script>
    <script src="./javascript/logout-login.js"></script>

</body>

</html>

这是我的注销功能的 JavaScript：


// Function to retrieve the JWT token from localStorage
        function getToken() {
            return localStorage.getItem("jwtToken");
        }

        // Function to check if the user is logged in
        function isLoggedIn() {
            const token = localStorage.getItem("jwtToken");
            return !!token; // Return true if a token exists, false otherwise
        }

        // Function to update the UI based on login status
        function updateUI() {
            const logoutContainer = document.getElementById("logoutContainer");
            if (isLoggedIn()) {
                // User is logged in, so show the logout button container
                logoutContainer.style.display = "block";
                loggedInMessage.style.display = "none";
            } else {
                // User is not logged in, so hide the logout button container
                logoutContainer.style.display = "none";
            }
        }

        // Call the updateUI function when the page loads
        window.addEventListener("DOMContentLoaded", () => {
            updateUI();
        });

        // Rest of your code, including the logout function
        function logout() {
            // Remove the JWT token from local storage
            localStorage.removeItem("jwtToken");

            // Redirect the user to the login page
            window.location.href = '/Frontend/login.html';
        }

function logout() {
    // Remove the JWT token from local storage
    localStorage.removeItem("jwtToken");

    // Optionally, you can perform other cleanup tasks here
    // For example, redirect the user to the login page
    window.location.href = '/Frontend/login.html';
}

这是我的 navbar.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>navbar</title>

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link rel="stylesheet" href="css/stylesheet.css" />
    <script src="https://code.jquery.com/jquery-3.6.3.js"
        integrity="sha256-nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM=" crossorigin="anonymous"></script>
</head>

<body>

    <nav class="navbar fixed-top navbar-expand-sm navbar-dark shadow p-3 mb-5 rounded">
        <div class="container">
            <a href="./index.html" class="navbar-brand mb-0 h1" style="font-size: x-large; color: cornsilk">guapo.
                <img class="d-inline-block align-top" src="images/clementine.png" width="38" height="38" />
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span><i id="menu-icon" class="bi bi-list"></i></span>
            </button>
            <div class="collapse navbar-collapse justify-content-between" id="navbarNav" style="color: cornsilk">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                        <a href="gefilterte-produkte.html?category=pflanzen" class="nav-link active"
                            id="pflanzen">Pflanzen</a>
                    </li>
                    <li class="nav-item">
                        <a href="gefilterte-produkte.html?category=toepfe" class="nav-link" id="toepfe">Töpfe</a>
                    </li>
                    <li class="nav-item">
                        <a href="gefilterte-produkte.html?category=pflanzenfreunde" class="nav-link"
                            id="pflanzenfreunde">Pflanzenfreunde</a>
                    </li>
                </ul>
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item me-3">
                        <a href="login.html" class="navbar-link">
                            <i class="bi bi-person-fill"></i>
                        </a>
                    </li>
                    <li class="nav-item me-3">
                        <a href="einkaufswagen.html" class="navbar-link">
                            <i class="bi bi-cart2"></i>
                        </a>
                    </li>
                </ul>
            </div>

        </div>
    </nav>
</body>

</html>

这就是我的导航栏在每个页面上的加载方式： 

$("#navbar").load("../Frontend/navbar.html .navbar");

我尝试了一些代码或替代方案，但到目前为止没有任何效果。

javascript html jquery navbar
1个回答
0
投票

当您使用 jQuery 将元素加载到 DOM 中时，它不会像直接加载 HTML 那样注册事件。

解决这个问题的最简单方法可能是将点击事件注册到导航栏的父元素，甚至文档本身。

$(document).on("click","#LogoutID",function() {
    logout()
});

其中 #LogoutID 是您想要触发注销功能的元素的一些有效选择器。

在任何规模的项目中，最好使用 React、Vue、Angular 等框架进行研究，这对解决此类问题有很大帮助，并有助于避免在全局 javascript 命名空间中出现注销代码（ ）目前看来是。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.