1 回答

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超7個(gè)贊
您的代碼中有幾個(gè)問題:
.slice(1, );
- 我認(rèn)為這是一個(gè)語法錯(cuò)誤。應(yīng)該是.slice(1);
(沒有逗號(hào)).
選擇器缺少類名的點(diǎn)- 因此更改此行以包含它,如下所示:var toggle_class_name = '.child-of-${category_id}';
最好使用所需的屬性切換類,而不是手動(dòng)添加刪除屬性
請(qǐng)參閱下面的工作演示:
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('.cat').forEach(category => {
category_id = category.getAttribute('id').slice(1);
var toggle_class_name = `.child-of-${category_id}`;
category.addEventListener('click', () => toggle_class(toggle_class_name));
});
});
function toggle_class(toggle_class_name) {
console.log(toggle_class_name);
document.querySelectorAll(toggle_class_name).forEach(item => {
item.classList.toggle('hidden');
});
};
tr.hidden{
display: none;
}
<div>
<table class='table' border=1>
<tr>
<th class='ref-col'>Reference</th>
<th class='des-col'>Description</th>
<th class='mth-head'>Jun-20</th>
<th class='mth-head'>Jul-20</th>
<th class='mth-head'>Aug-20</th>
</tr>
<tr id='c2' class='child-of-None cat'>
<td class='ref-col'>C0002</td>
<td class='des-col'>Financial Statements</td>
<td class='amt-col'></td>
<td class='amt-col'></td>
<td class='amt-col'></td>
</tr>
<tr id='c1' class='child-of-2 cat'>
<td class='ref-col'>C0001</td>
<td class='des-col'>   Balance Sheet</td>
<td class='amt-col'></td>
<td class='amt-col'></td>
<td class='amt-col'></td>
</tr>
<tr id='c6' class='child-of-1 cat'>
<td class='ref-col'>C0006</td>
<td class='des-col'>      Non-Current Assets</td>
<td class='amt-col'></td>
<td class='amt-col'></td>
<td class='amt-col'></td>
</tr>
<tr id='c11' class='child-of-6 cat'>
<td class='ref-col'>C0011</td>
<td class='des-col'>         Property, Plant & Equipment</td>
<td class='amt-col'></td>
<td class='amt-col'></td>
<td class='amt-col'></td>
</tr>
<tr id='g1000001' class='child-of-11 gl'>
<td class='ref-col'>1000001</td>
<td class='des-col'>            Freehold Land</td>
<td class='amt-col'></td>
<td class='amt-col'></td>
<td class='amt-col'></td>
</tr>
</table>
</div>
添加回答
舉報(bào)