我試圖只訪問容器的所有子元素。我為此創建了一個 ES6 類。根據我的專案要求，我需要課堂方法。我的目標是，當我單擊任何子元素時，需要選擇所有子元素。現在舉個例子，當我點擊任何子元素時，我給所有子元素一個紅色邊框。如果你看到我的代碼，下面這行是我需要幫助的主要內容，let children = parent.querySelectorAll(".child");現在我.child在這里使用了類。但我怎么能this.children在這里使用。完整的線路應該是這樣的let children = parent.querySelectorAll(this.children);。我怎樣才能做到這一點。我的代碼如下。如果我得到這個，它將非常有幫助。希望任何人都可以幫助我。提前致謝！
class Selector{
constructor(parents, children) {
this.parents= document.querySelectorAll(parents);
this.children= document.querySelectorAll(children);
this.selectall=()=>{
this.children.forEach((elem)=>{
elem.addEventListener("click",(e)=>{
let parent = e.target.parentElement;
let children = parent.querySelectorAll(".child");
children.forEach((elem)=>{elem.style.border="2px solid red"});
})
})
}
}
}
let one = new Selector(".parent",".child");
one.selectall();.parent {font-family:Arial, Helvetica, Sans-serif;}<ul class="parent">
<li class="child">One</li>
<li class="child">Two</li>
<li class="child">Three</li>
</ul>
<ul class="parent">
<li class="child">One</li>
<li class="child">Two</li>
<li class="child">Three</li>
</ul>uj5u.com熱心網友回復：
解決方案 1（如果parent所有孩子都child上課）：
代替
let children = parent.querySelectorAll(".child");
嘗試這個
let children = Array.from(parent.children);
解決方案 2（如果parent孩子的班級不是child）
也存盤子類。
class Selector {
constructor(parents, children) {
this.parents = document.querySelectorAll(parents);
this.childrenClass = children;
this.children = document.querySelectorAll(children);
this.selectall = () => {
this.children.forEach((elem) => {
elem.addEventListener("click", (e) => {
let parent = e.target.parentElement;
let children = parent.querySelectorAll(this.childrenClass);
children.forEach((elem) => {
elem.style.border = "2px solid red";
});
});
});
};
}
}
let one = new Selector(".parent", ".child");
one.selectall();
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/357865.html
標籤：javascript html 点击 es6级
上一篇：如何在Vue中增加回圈