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

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

我想要hide/show的结果为login/logout个元素。多页页面具有相同的ID，我想在登录/注销功能中访问此元素以隐藏或显示。我使用了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>
javascript show-hide
1个回答
0
投票

具有相同id的多个项目是不好的。添加通用数据类型属性而不是通用ID。

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

并且在javascript中，您可以通过执行以下操作来选择这些元素：

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

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

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

list.forEach( 
   function(e) { 
        e.style.display = "none"; 
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.