這是我的第一篇 SO 帖子，請讓我知道如何做得更好！
我有一個通過將不透明度設定為 0 來清除的函式，它可以作業，但是如果嘗試設定一個具有相同功能欄不同 ID 的整個電子表格，它會使我的檔案變得很大，
理想情況下，我希望它發揮作用的方式是自行清除，并將清除所有塊。我想在不必撰寫重復函式的情況下做到這一點。
是否可以在類上設定函式？我嘗試過但沒有成功
或者有沒有更好的方法來運行 JavaScript，比如不知何故onclick==clear.self？
function Xf1() {
f1();
f2();
}
function f1() {
var element = document.getElementById("a1");
element.style.opacity = "0";
}
function f2() {
var element = document.getElementById("a2");
element.style.opacity = "0";<tr>
<th onclick="Xf1()">Clear all</th>
</tr>
<tr>
<td onclick="f1()" id="a1"> text1</td>
<td onclick="f2()" id="a2"> text2</td>
</tr>uj5u.com熱心網友回復：
您可以使用事件委托
- 首先向表格元素添加一個類
- 在“全部清除”標題中添加一個類
- 給表格元素添加一個點擊事件監聽器
如果單擊事件目標是一個td元素，則將其不透明度設定為 0。
如果單擊目標是清除所有標題，請將所有td元素設定為不透明度 0。您可以通過查詢表中的td標簽然后使用forEach更改每個元素的不透明度來實作。
const myTable = document.body.querySelector(".my-table");
myTable.addEventListener("click", event => {
const target = event.target;
if (target.tagName == "TD") {
target.style.opacity = 0;
}
if (target.classList.contains("clear-all")) {
myTable.querySelectorAll("td").forEach(item => (item.style.opacity = 0));
}
});<table class="my-table">
<thead>
<th class="clear-all">Clear all</th>
</thead>
<tbody>
<tr>
<td id="a1">text1</td>
<td id="a2">text2</td>
</tr>
</tbody>
</table>uj5u.com熱心網友回復：
將 id 設定為父標簽，然后將 onclick 設定為該元素的子元素。
如果您將“容器”設定為 id，您將得到如下內容：
var elements = document.getElementById("container");
for (let i = 0; i < elements.children.length; i ) {
elements.children[i].onclick = function () {
elements.children[i].style.opacity = "0";
};
}
uj5u.com熱心網友回復：
而不是將 onclick 添加到每個td元素。把它放在table元素中。像這樣
document.querySelector("#table").addEventListener("click", (event)=>{
if(event.target.dataset.type==='clear'){
const ids = ['a1', 'a2'];
ids.forEach((ele)=>{
document.querySelector(`#${ele}`).style.opacity = '0';
});
return;
}
event.target.style.opacity = "0";
}
)<table id="table">
<tr>
<th data-type="clear">Clear all</th>
</tr>
<tr id="tableRows">
<td id="a1"> text1</td>
<td id="a2"> text2</td>
</tr>
</table>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/351578.html
標籤：javascript html 功能
下一篇：將圓形按鈕放在導航欄下方