我有一個具有以下格式的站點：主頁（稱為 index.html）包含：
- 標題
- 主要部分
- 頁腳
標題包含一個漢堡包圖示，當單擊子選單和子子選單時，它會打開一個導航欄，主要由 JS 腳本填充，這些腳本從 Nodejs 和 MySQL 呼叫結果構建導航欄。
因為 NavBar 相當復雜，而且我的站點有很多不同的頁面，所以我決定將整個標題提取到它自己的 html 檔案（稱為 header.html）中，并將 header.html 作為 index.html 的標題匯入到一個 div 中，使得只維護一個 html 頁面而不是對所有 html 頁面進行相同的更改更容易。
我匯入標頭（稱為 header.html）的方式是使用此函式（在名為 headerJS.js 的單獨檔案中）：
const headerPage = '/public/html/header.html';
const headerDiv = document.getElementById('header_container');
function loadHeader() {
const xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
headerDiv.innerHTML = xmlHttp.responseText;
}
};
xmlHttp.open("GET", headerPage, true); // true for asynchronous
xmlHttp.send(null);
}
loadHeader();這很好用，因為它將我的 header.html 匯入到我的 index.html 檔案中。但是，當我單擊漢堡包圖示時，什么也沒有發生，控制臺告訴我 toggle 為 null - toggle 是 const 的名稱，它包含對漢堡包圖示上類名稱的參考，如下所示：
/* Hide - Show the Menu Items if click on the Hamburger Icon */
const toggle = document.querySelector('.navBarToggle');
const menu = document.querySelector('.menu');
function toggleMenu() {
if (menu.classList.contains("active")) {
menu.classList.remove("active");
document.querySelector(".navbar").style.setProperty("padding", "0");
toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
menu.classList.add("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
document.querySelector(".navbar").style.setProperty("padding", "15px");
}
}
toggle.addEventListener('click', toggleMenu);如果我打開 header.html 并單擊該圖示，它會很好地打開并加載整個 NavBar，但如果我從 index.html 中單擊它，則不會發生任何事情。
我認為這可能是因為在 index.html 中加載 header.html 時，querySelector 找不到 .navBatToggle，因為 document.querySelector 正在尋找 header.html 的 index.html 內的 navBarToggle。
我顯然做了一些谷歌搜索，發現了一些聽起來很有趣的東西，但我并不安靜地理解它，因為我是 WebDev 的新手，關于共享網路作業者。這可以解決我的問題嗎？如果可以，是否有資源可以以簡單的方式解釋它們的作業原理-不太了解 MDN 上的解釋）。
如果還有其他解決方案，請您指出正確的方向嗎？我試圖指向 window.querySelector 而不是 document.querySelector 認為該視窗將應用于整個站點而不僅僅是 index.html 檔案，但它沒有任何區別。
有沒有辦法，通過單擊 index.hmtl 頁面中的圖示，使查詢選擇器在 header.html 頁面中查找 .navBarToggle 類，而不是明顯參考 index.html 的 document.querySelector？
先感謝您。M。
uj5u.com熱心網友回復：
你說得對。
您的想法看起來像 React.js 和其他任何組件中的組件。
但是，在靜態 html 頁面的繪制中，如果您將任何其他 html 檔案加載為 Ajax，則這些檔案不會按照您的方式應用，這就是加載時間 - window.document 物件將在不同時間讀取的原因。
啊，認為你的方式是 - 加載為文本。沒錯，就是文本加載。
我不推薦這些方法。
然后，你可以使用 AngularJS。
這是我的建議。
謝謝。
uj5u.com熱心網友回復：
事件偵聽器不能添加到頁面加載后創建的任何標記。#header-container如果這是導航欄附加到的標簽（或者更合乎邏輯的頁腳，但我只能按照您實際發布的內容進行調整，則需要添加事件偵聽器）。
/*
Add the listener to a parent tag that has existed
before the page has loaded
*/
document.getElementById('header_container').addEventListener('click', toggleMenu);
向事件處理程式添加一個條件，該條件toggleMenu(e)僅在用戶單擊時接受.navBarToggle
if (clicked.matches('.navBarToggle')) {...
有關詳細資訊，請參閱事件委托
// Pass the Event Object
function toggleMenu(e) {
// This is the tag the user actually clicked
const clicked = e.target;
const menu = document.querySelector('.menu');
/*
if clicked has class .navBarToggle
then do whatever...
*/
if (clicked.matches('.navBarToggle')) {
if (menu.classList.contains("active")) {
menu.classList.remove("active");
document.querySelector(".navbar").style.setProperty("padding", "0");
toggle.querySelector("a").innerHTML = "<i class='fas fa-bars'></i>";
} else {
menu.classList.add("active");
toggle.querySelector("a").innerHTML = "<i class='fas fa-times'></i>";
document.querySelector(".navbar").style.setProperty("padding", "15px");
}
// Wrap the whole thing in this if statement
}
}
/*
Add the listener to a parent tag that has existed
before the page has loaded
*/
document.getElementById('header_container').addEventListener('click', toggleMenu); <!--Before Page Loads BEGIN-->
<div id='header_container'>
<!--After Page Loaded BEGIN-->
<button class='navBarToggle'></button>
<nav class='menu'>
<a></a>
</nav><!--After Page Loaded END-->
</div><!--Before Page Loads END-->轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/406410.html
標籤：
上一篇：簡單的DOM專案