使用document.getElementById引用多個（不同）Div ID

Question

我在SharePoint中使用腳本編輯器Web部件來創建全屏覆蓋導航功能。

我從https://www.w3schools.com/howto/howto_js_fullscreen_overlay.asp獲得了代碼。

我對其進行了一些修改，因為我想單擊多個使用此功能的菜單。 我嘗試上傳圖片，但沒有10個聲譽點：/以下是文字表示。 我有一個教義菜單鏈接和一個TTP菜單鏈接。

教義
TTP

他們工作; 但是，無論我單擊哪一個，它們都顯示與TTP相關的鏈接。 我要單擊“教義”並查看“教義”鏈接，然后單擊“ TTP”以查看TTP鏈接。 兩個單獨的導航菜單分別執行全屏覆蓋功能。

我知道這個主題已被毆打致死，但我找不到滿足我要求的任何東西。 下面是我如何引用getElementById 。

注意：我用虛擬鏈接替換了實際鏈接。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
    font-family: 'Lato', sans-serif;
}

.overlay {
    height: 0%;
    width: 100%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(28,65,104, 0.9);
    overflow-y: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: #eccb13;
    display: block;
    transition: 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #800000;
}

.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
</style>
</head>
<body>

<div id="doctrineNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">Car</a>
    <a href="#">Bicycle</a>
    <a href="#">Boat</a>
    <a href="#">Airplane</a>
  </div>

</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9758; Doctrine</span>

<p></p>

<div id="ttpNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div class="overlay-content">
    <a href="#">Apple</a>
    <a href="#">Orange</a>
    <a href="#">Dog</a>
    <a href="#">Cat</a>
  </div>

</div>

<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9758; TTP</span>

<script>
function openNav() {
   document.getElementById("doctrineNav").style.height = "100%";
}

function closeNav() {
   document.getElementById("doctrineNav").style.height = "0%";
}

function openNav() {
   document.getElementById("ttpNav").style.height = "100%";
}

function closeNav() {
   document.getElementById("ttpNav").style.height = "0%";
}

</script>

</body>
</html>

如果我像下面那樣更改腳本，那么無論我單擊哪個腳本，它們都將相互重疊。 換句話說，我可以看到TTP鏈接，也可以看到其背后的教義鏈接。

<script>
function openNav() {
   document.getElementById("doctrineNav").style.height = "100%";
   document.getElementById("ttpNav").style.height = "100%";
}

function closeNav() {
   document.getElementById("doctrineNav").style.height = "0%";
   document.getElementById("ttpNav").style.height = "0%";
}

</script>

Answer 1

問題在於，您已經為兩組函數命名相同。 當您第二次聲明openNav顯示TTP時，它將替換第一個實例。 一個簡單的解決方案是只聲明兩個獨立的函數集，例如：

function openDoctrine() {
   document.getElementById("doctrineNav").style.height = "100%";
}

function closeDoctrine() {
   document.getElementById("doctrineNav").style.height = "0%";
}

function openTTP() {
   document.getElementById("ttpNav").style.height = "100%";
}

function closeTTP() {
   document.getElementById("ttpNav").style.height = "0%";
}

並酌情引用它們，例如：

<div id="doctrineNav" class="overlay">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  ...
</div>
...
<span style="font-size:30px;cursor:pointer" onclick="openDoctrine()">&#9758; Doctrine</span>

簡而言之，您無法在JavaScript中重用名稱（引擎應如何知道您要引用的功能？），因此請針對不同的任務使用更特定的名稱。

Answer 2

@Ken Bellows有一個很好的答案。 我發現有用的另一件事是向您要選擇的元素添加一個額外的類。 該類應該沒有額外的CSS，其唯一目的是允許您用一行選擇多個div。 然后，使用此處的代碼。

使用document.getElementById引用多個（不同）Div ID

問題描述

2 個解決方案

解決方案1
2 已采納 2018-08-17 19:10:24

解決方案2
0 2018-08-17 20:24:20

使用document.getElementById引用多個（不同）Div ID

問題描述

2 個解決方案

解決方案1 2 已采納 2018-08-17 19:10:24

解決方案2 0 2018-08-17 20:24:20

解決方案1
2 已采納 2018-08-17 19:10:24

解決方案2
0 2018-08-17 20:24:20