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

Question

我正在尝试使用 Javascript 来切换类，该类在 Django 生成的模板上运行。我有以下代码：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>当toggle_class_name正确登录到控制台时，toggle_class函数就会被触发。但是，其他任何事情都不会登录到控制台上。当我单击“类别”时，DOM 中属于“toggle_class_name”类的标签不会切换。这些标签还有除“toogle_class_name”之外的其他类。为什么课程没有切换？

Answer 1

您的代码中有几个问题：

1. .slice(1, );- 我认为这是一个语法错误。应该是.slice(1);（没有逗号）

2. .选择器缺少类名的点- 因此更改此行以包含它，如下所示：var toggle_class_name = '.child-of-${category_id}';

3. 最好使用所需的属性切换类，而不是手动添加删除属性

请参阅下面的工作演示：

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>