第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

用于切換類中所有標(biāo)簽的 Javascript 函數(shù)未執(zhí)行

用于切換類中所有標(biāo)簽的 Javascript 函數(shù)未執(zhí)行

慕標(biāo)5832272 2023-06-29 21:01:07
我正在嘗試使用 Javascript 來切換類,該類在 Django 生成的模板上運(yùn)行。我有以下代碼: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>當(dāng)toggle_class_name正確登錄到控制臺(tái)時(shí),toggle_class函數(shù)就會(huì)被觸發(fā)。但是,其他任何事情都不會(huì)登錄到控制臺(tái)上。當(dāng)我單擊“類別”時(shí),DOM 中屬于“toggle_class_name”類的標(biāo)簽不會(huì)切換。這些標(biāo)簽還有除“toogle_class_name”之外的其他類。為什么課程沒有切換?
查看完整描述

1 回答

?
qq_笑_17

TA貢獻(xiàn)1818條經(jīng)驗(yàn) 獲得超7個(gè)贊

您的代碼中有幾個(gè)問題:

  1. .slice(1, );- 我認(rèn)為這是一個(gè)語法錯(cuò)誤。應(yīng)該是.slice(1);(沒有逗號(hào))

  2. .選擇器缺少類名的點(diǎn)- 因此更改此行以包含它,如下所示:var toggle_class_name = '.child-of-${category_id}';

  3. 最好使用所需的屬性切換類,而不是手動(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'>&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>


查看完整回答
反對(duì) 回復(fù) 2023-06-29
  • 1 回答
  • 0 關(guān)注
  • 167 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)