我有兩個導航框，其中第一個有一個 CSS 類.one，第二個是空白的。對于第一個導航框，我通過檢測類名給 JavaScript 一個邊框.one。但是我也得到了第二個導航框的邊框，盡管它沒有類。在這里，我使用模板文字方法。我知道我可以直接在querySelectorAll方法內部使用類名來解決這個問題，如下所示let li = document.querySelectorAll(".one > ul li");。但是我需要模板文字解決方案，這對我使用其他一些專案也最有用。主要是我需要將類名表示為變數。以下是我的代碼。誰可以幫我這個事。提前致謝！
let parents = document.querySelector(".one");
let li = document.querySelectorAll(`${parents.tagName} > ul li`);
li.forEach((elem)=>{elem.style.border="1px solid red"}); nav {font-family:arial;width:15rem;}
nav ul {list-style:none;padding:0;margin:1rem;padding-left:.5rem;}
nav ul a {color:#777;text-decoration:none;padding:.5rem;}<nav class="one">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a>
<ul>
<li><a href="#">Vision</a></li>
<li><a href="#">Mission</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<br>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>uj5u.com熱心網友回復：
嘗試替換此行：
let li = document.querySelectorAll(`${parents.tagName} > ul li`);
有了這個：
let li = parents.querySelectorAll(`ul li`);
如你預期它不為你作業的原因，是因為你匹配所有與查詢選擇的要素nav > ul li 中document，你完全忽略的類名nav您在選擇的標簽parents變數。
否則，您可以簡單地執行此操作：
let li = document.querySelectorAll(`.one > ul li`);
li.forEach((elem)=>{elem.style.border="1px solid red"});
或者只使用 CSS：
.one > ul li {
border: 1px solid red;
}
或者如果你想選擇第一個元素（我不知道你的意圖是什么，但我是根據你的代碼猜測的）：
.one:first-child > ul li {
border: 1px solid red;
}
uj5u.com熱心網友回復：
不需要 JavaScript。僅通過 CSS 就可以實作。
.one > ul > li { border: 1px solid red}
或在您的 JS 更改中
let li = document.querySelectorAll(`${parents.tagName} > ul > li`);
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/358057.html
標籤：javascript 变量