用于切换未执行的类中的所有标签的 Javascript 函数

Question

I am trying to toggle classes using Javascript which runs on a template generated by Django. I have the following code:

 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 => { console.log('loop triggered'); var current_display = item.style.display; if (current_display === 'none') { current_display = 'block'; console.log(`expanding`); } else { current_display = 'none'; console.log(`collapsing`); } item.style.display = current_display; }); };

 <div> <table class='table'> <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'>&nbsp&nbsp&nbspBalance 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'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbspNon-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'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspProperty, Plant &amp; 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'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspFreehold Land</td> <td class='amt-col'></td> <td class='amt-col'></td> <td class='amt-col'></td> </tr> </table>

The toggle_class function does get triggered as the toggle_class_name gets correctly logged onto the console. However none of the other things get logged onto the console. The tags in the DOM which are of the class 'toggle_class_name' do not get toggled when I click the 'category'. These tags have additional classes other than 'toogle_class_name' as well.

Why are the classes not getting toggled?

Answer 1

You have several issues in your code:

1. .slice(1, ); - I think this is a syntax error. It should be .slice(1); (no comma)
2. A selector is missing the dot . for the class name - so change this line to include it like: var toggle_class_name = '.child-of-${category_id}';
3. Instead of adding removing properties manually, it's likely best to toggle classes with the desired properties

See working demo below:

 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'>&nbsp&nbsp&nbspBalance 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'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbspNon-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'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspProperty, Plant &amp; 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'>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspFreehold Land</td> <td class='amt-col'></td> <td class='amt-col'></td> <td class='amt-col'></td> </tr> </table> </div>