我有一堆 div，里面有一些文字。我正在嘗試創建一個簡單的函式，該函式以具有特定文本的 div 為目標并為它們提供一個類。我還想給帶有其他文本的 div 一個通用類。
我已經設法用特定文本定位 div，但我不知道如何用其他文本定位 div。
這是 HTML
<h1>The divs</h1>
<div>High</div>
<div>Low</div>
<div>Medium</div>
<div>Hit 'em high</div>
<div>Medium rare</div>
<div>A funky name</div>
這就是功能
const divs = document.querySelectorAll('div');
function classChanger () {
for (let i = 0; i < divs.length; i ) {
if (divs[i].textContent === 'High') {
divs[i].classList.add('high');
} if (divs[i].textContent === 'Medium') {
divs[i].classList.add('medium');
} if (divs[i].textContent === 'Low') {
divs[i].classList.add('low');
} if (divs[i].textContent === 'anything') {
divs[i].classList.add('none');
}
}
};
classChanger();
我嘗試使用更多的 if statemets with !== 'High' 等等，但它們只是覆寫了以前的代碼。
所以我只是想知道，我如何定位最后三個 div 并且不給他們上課？我試過谷歌搜索，但我認為我搜索的不是正確的問題，這就是我在這里問的原因。
uj5u.com熱心網友回復：
您可以將High、Medium和添加Low到陣列中。當您回圈遍歷元素時，檢查是否陣列includes文本（并將類設定為文本的小寫版本），否則添加一個none類。
const divs = document.querySelectorAll('div');
const range = ['High', 'Medium', 'Low'];
function classChanger() {
for (let i = 0; i < divs.length; i ) {
const text = divs[i].textContent;
if (range.includes(text)) {
divs[i].classList.add(text.toLowerCase());
} else {
divs[i].classList.add('none');
}
}
}
classChanger();.high { color: red; }
.medium { color: orange; }
.low { color: yellow; }
.none { color: darkgray; }<div>High</div>
<div>Low</div>
<div>Medium</div>
<div>Hit 'em high</div>
<div>Medium rare</div>
<div>A funky name</div>uj5u.com熱心網友回復：
您可以使用這樣的else if陳述句：
const divs = document.querySelectorAll("div");
function classChanger() {
for (let i = 0; i < divs.length; i ) {
if (divs[i].textContent === "High") {
divs[i].classList.add("high");
} else if (divs[i].textContent === "Medium") {
divs[i].classList.add("medium");
} else if (divs[i].textContent === "Low") {
divs[i].classList.add("low");
} else {
divs[i].classList.add("none");
}
}
}
classChanger();
uj5u.com熱心網友回復：
如果要根據內容定位元素，首先需要為此目的創建一個函式，例如：
function queryElementsWithFilter(selector, filterCallback) {
if (typeof selector !== 'string') throw new TypeError('param 1 must be a string')
if (typeof filterCallback !== 'function') throw new TypeError('param 2 must be a function')
const nodes = [...document.querySelectorAll(selector)]
return nodes.filter(filterCallback)
}
現在你可以得到你想要的元素并用它們做任何事情。
const textTokens = ['High', 'Medium', 'Low']
textTokens.forEach(textToken => {
const divCollection = queryElementsWithFilter(
'div',
node => node.textContent === textToken
)
divCollection.forEach(div => div.classList.add(textToken.toLowerCase()))
})
const unmatchedNodes = queryElementsWithFilter(
'div',
node => !textTokens.includes(node.textContent)
)
unmatchedNodes.forEach(div => div.classList.add('none'))
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510229.html
下一篇：將屬性添加到xml子標簽