我有數個DOM想要改動 變換他們的CSS
全部一條一條寫起來會像是這樣
try{
document.getElementsByClassName("TOP-btn")[0].getElementsByTagName("span")[0].style.display="none"
document.getElementsByClassName("TOP-btn")[1].getElementsByTagName("span")[0].style.display="none"
document.getElementsByClassName("TOP-btn")[2].getElementsByTagName("span")[0].style.display="none"
document.getElementsByClassName("TOP-btn")[3].getElementsByTagName("span")[0].style.display="none"
document.getElementsByClassName("top_btn_recommend")[0].getElementsByTagName("span")[0].style.display="none"
document.getElementsByClassName("top_btn_notice")[0].getElementsByTagName("span")[0].style.display="none"
document.getElementsByClassName("top_btn_subscription")[0].getElementsByTagName("span")[0].style.display="none"
}catch{
console.log("ok")}
如果我想要用map或forEach邏輯來整合 是否可行?
我嘗試以下:
const array = ["top_btn_subscription", "top_btn_recommend",""top_btn_notice"];
array.forEach(x => document.getElementsByClassName(x).getElementsByTagName("span")[0].style.display="none");
會發生不是function的問題 請問哪邊有錯誤呢?
1.還是是要用迴圈for 2.還是說這種狀況數量不多 就這樣 不用統整?
const elements = [
document.getElementsByClassName("TOP-btn"),
document.getElementsByClassName("top_btn_recommend"),
document.getElementsByClassName("top_btn_notice"),
document.getElementsByClassName("top_btn_subscription")
];
try {
elements.forEach((elementList) => {
elementList.forEach((element) => {
// Get the first span element within the element
const span = element.getElementsByTagName("span")[0];
// Set the display style to "none"
span.style.display = "none";
});
});
} catch {
console.log("ok");
}
try{
Array.from(document.getElementsByClassName("TOP-btn")).forEach((elm)=>{
elm.getElementsByTagName("span")[0].style.display="none"
})
// 下面三個沒辦法用簡單的selector清楚表達,建議不要放到迴圈
document.getElementsByClassName("top_btn_recommend")[0].getElementsByTagName("span")[0].style.display="none"
document.getElementsByClassName("top_btn_notice")[0].getElementsByTagName("span")[0].style.display="none"
document.getElementsByClassName("top_btn_subscription")[0].getElementsByTagName("span")[0].style.display="none"
}catch{
console.log("ok")
}
另外這幾個元素我覺得你會需要弄成一個group,建議乾脆弄個array或閉包存起來。
另外建議這幾個都加個共同沒有style的class,這樣就可以直接用selector選了。
我記得當使用 document.getElementsByClassName 本身就可以取得陣列才對。
這樣可以搭配forEach或是直接用for來處理
原生JS我太久沒寫了,網路上找到一個示意的寫法給你參考。
這是用FOR來處理的。
const allOrangeJuiceByClass = document.getElementsByClassName('orange juice');
let result = "document.getElementsByClassName('orange juice')";
for (let i = 0; i < allOrangeJuiceByClass.length; i++) {
result += `\n ${allOrangeJuiceByClass[i].textContent}`;
}