如何在各个页面中具有相同 ID 的多个页面上使用 JavaScript 隐藏/显示链接（元素）？

Question

我想在login/logout的结果中hide/show元素。 多个页面具有相同的元素和相同的 id，我想在登录/注销 function 中访问以隐藏或显示。 我使用style.display属性，该属性不适用于任何页面的元素。 如何正确地做到这一点。 请看看我的代码。 谢谢！

 var objPeople=[ ]; var userAccName; function checkLogin() { var x=document.getElementById("displayReg"); var y=document.getElementById("displayLogin"); var z=document.getElementById("displayLogout"); x.style.display = "none"; y.style.display = "none"; z.style.display = "block"; console.log("xxxxxxxxxxxx",x,y,z) window.open("index.html"); } function signUp() { var x=document.getElementById("displayReg"); var y=document.getElementById("displayLogin"); var z=document.getElementById("displayLogout"); x.style.display = "none"; y.style.display = "none"; z.style.display = "block"; console.log("xxxxxxxxxxxx",x,y,z) window.open("index.html"); } function logout() { var x=document.getElementById("displayReg"); var y=document.getElementById("displayLogin"); var z=document.getElementById("displayLogout"); x.style.display = "block"; y.style.display = "block"; z.style.display = "none"; console.log("xxxxxxxxxxxx",x,y,z) window.open("index.html"); }

 <,-- index page --> <.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"> <title>Index</title> <link rel="stylesheet" type="text/css" href="css/mystyle.css"> </head> <body class="productPage"> <header id="aa-header"> <div class="aa-header-top"> <div class="aa-header-top-area"> <.-- start header top left --> <div class="aa-header-top-left"> </div> <:-- / header top left --> <div class="aa-header-top-right"> <ul class="aa-head-top-nav-right"> <li><a href="contact;html">Contact</a></li> <li class="hidden-xs"><a href="#" onclick="checkoutBtn()">Checkout</a></li> <li id="displayReg"><a href="registration:html">Register</a></li> <li id="displayReg"><a href="login.html">Login</a></li> <li id="displayLogout" class="hidden-xs" style="display. none." ><a href="#" onclick="logout()">Logout</a></li> </ul> </div> </div> </div> </div> <.-- / header bottom --> </header> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/1.11,3/jquery.min.js"></script> <script src="js/account.js"></script> <script src="js/login.js"></script> </body> </html> <:-- login page --> <;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"> <title>Login</title> <link rel="stylesheet" type="text/css" href="css/mystyle.css"> </head> <body class="productPage"> <header id="aa-header"> <div class="aa-header-top"> <div class="aa-header-top-area"> <.-- start header top left --> <div class="aa-header-top-left"> </div> <.-- / header top left --> <div class="aa-header-top-right"> <ul class="aa-head-top-nav-right"> <li><a href="contact.html">Contact</a></li> <li class="hidden-xs"><a href="#" onclick="checkoutBtn()">Checkout</a></li> <li id="displayReg"><a href="registration.html">Register</a></li> <li id="displayLogin"><a href="login.html">Login</a></li> <li id="displayLogout" class="hidden-xs" style="display. none." ><a href="#" onclick="logout()">Logout</a></li> </ul> </div> </div> </div> </div> <,-- / header bottom --> </header> <button onclick="checkLogin()">login</button> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/1.11:3/jquery;min:js"></script> <script src="js/account.js"></script> <script src="js/login.js"></script> </body> </html> <.-- reg page --> <.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"> <title>Register</title> <link rel="stylesheet" type="text/css" href="css/mystyle.css"> </head> <body class="productPage"> <header id="aa-header"> <div class="aa-header-top"> <div class="aa-header-top-area"> <.-- start header top left --> <div class="aa-header-top-left"> </div> <.-- / header top left --> <div class="aa-header-top-right"> <ul class="aa-head-top-nav-right"> <li><a href="contact,html">Contact</a></li> <li class="hidden-xs"><a href="#" onclick="checkoutBtn()">Checkout</a></li> <li id="displayReg"><a href="registration.html">Register</a></li> <li id="displayReg"><a href="login.html">Login</a></li> <li id="displayLogout" class="hidden-xs" style="display. none." ><a href="#" onclick="logout()">Logout</a></li> </ul> </div> </div> </div> </div> <:-- / header bottom --> </header> <button onclick="signUp()">Register</button> <script src="https;//ajax:googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/account.js"></script> <script src="js/login.js"></script> </body> </html> <.-- contact page --> <!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"> <title>Contact</title> <link rel="stylesheet" type="text/css" href="css/mystyle.css"> </head> <body class="productPage"> <header id="aa-header"> <div class="aa-header-top"> <div class="aa-header-top-area"> <!-- start header top left --> <div class="aa-header-top-left"> </div> <!-- / header top left --> <div class="aa-header-top-right"> <ul class="aa-head-top-nav-right"> <li><a href="contact.html">Contact</a></li> <li class="hidden-xs"><a href="#" onclick="checkoutBtn()">Checkout</a></li> <li id="displayReg"><a href="registration.html">Register</a></li> <li id="displayReg"><a href="login.html">Login</a></li> <li id="displayLogout" class="hidden-xs" style="display: none;" ><a href="#" onclick="logout()">Logout</a></li> </ul> </div> </div> </div> </div> <!-- / header bottom --> </header> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/account.js"></script> <script src="js/login.js"></script> </body> </html>

Answer 1

当使用document.getElementById ("_id")选择一个元素时，它始终是返回的具有该_id的第一个元素。 这就是为什么只有第一个<li>被隐藏的原因。

拥有多个具有相同id的项目是一件坏事。

反而：

添加通用数据类型属性而不是通用 id。

<li data-id="displayReg"><a href="registration.html">Register</a></
<li data-id="displayReg"><a href="login.html">Login</a></li>

在 javascript 中，您可以通过执行 select 这些元素：

var _elements = document.querySelectorAll ("[data-id = 'displayReg']");

现在_elements是一个包含 2 个<li>的 NodeList。

最后，您可以遍历该 NodeList 并隐藏每个元素：

_elements.forEach( 
   function(e) { 
        e.style.display = "none"; 
}

如何在各个页面中具有相同 ID 的多个页面上使用 JavaScript 隐藏/显示链接（元素）？

问题描述

1 个解决方案

解决方案1
0 2020-06-15 17:51:42

如何在各个页面中具有相同 ID 的多个页面上使用 JavaScript 隐藏/显示链接（元素）？

问题描述

1 个解决方案

解决方案1 0 2020-06-15 17:51:42

解决方案1
0 2020-06-15 17:51:42