亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

純 JavaScript 中的自定義切換功能

純 JavaScript 中的自定義切換功能

慕虎7371278 2023-02-24 15:57:29
在這里,為什么切換方法不起作用?我正在嘗試運行自定義函數并在純 JavaScript 中循環此函數。我期待 Jquery 切換。單擊標題時,然后添加dsplyBlck到它的子文章,dsplyBlck當重新單擊標題時,將其刪除到它的子文章。window.onload = function(){  var hdr = document.querySelectorAll('header');  for(var i=0; i<hdr.length; i++){    hdr[i].onclick = function(){      var elm = this.closest('section').querySelector('article');      tgglArticle(elm,this);    }  }}function tgglArticle(elm, hdr){  elm.classList.add('dsplyBlck');  hdr.addEventListener('click',function(){    console.log('Here message is displaying, but remove class not working');    elm.classList.remove('dsplyBlck');    tgglArticle(elm,hdr);  })}.dsplyNne{  display:none;}.crsr{  cursor:pointer;}.dsplyBlck{  display:block;}<section>  <header class='crsr'>    Header  </header>  <article class='dsplyNne'>    Details  </article></section><section>  <header class='crsr'>    Header  </header>  <article class='dsplyNne'>    Details  </article></section>
查看完整描述

3 回答

?
呼啦一陣風

TA貢獻1802條經驗 獲得超6個贊

我已經重寫了javascript。源文件中的文檔。


window.onload = () => {

  // Capture the header elements in an array

  const hdr = [...document.querySelectorAll('header')];

  // Add an eventlistener for each header element

  hdr.map( (h) => {

    h.addEventListener( "click", (e) => {

      // Toggle the class for the next sibling (article)

      const t = e.currentTarget.nextElementSibling;

      t.classList.toggle("dsplyNne");

    });

  });

}

.dsplyNne {

  display: none;

}


.crsr {

  cursor: pointer;

}


.dsplyBlck {

  display: block;

}

<section>

  <header class='crsr'>

    Header

  </header>

  <article class='dsplyNne'>

    Details

  </article>

</section>

<section>

  <header class='crsr'>

    Header

  </header>

  <article class='dsplyNne'>

    Details

  </article>

</section>


查看完整回答
反對 回復 2023-02-24
?
明月笑刀無情

TA貢獻1828條經驗 獲得超4個贊

解決方案:


function toggleElm(elem) {

  let x = document.getElementById(elem);

  if (x.classList.contains('dsplyBlck')) {

    x.classList.add('dsplyNne');

    x.classList.remove('dsplyBlck');

  } else {

    x.classList.add('dsplyBlck');

    x.classList.remove('dsplyNne');

  }

<html>

  <head>

    <style>

      .dsplyNne{

        display:none;

      }

      .crsr{

        cursor:pointer;

      }

      .dsplyBlck{

        display:block;

      }

    </style>

  </head>

  <body>

    <section>

      <header class='crsr' onclick="toggleElm('target1')">

        Header

      </header>

      <article class='dsplyNne' id="target1">

        Details

      </article>

    </section>

    <section>

      <header class='crsr' onclick="toggleElm('target2')">

        Header

      </header>

      <article  class='dsplyNne' id="target2">

        Details

      </article>

    </section>

  </body>

</html>


查看完整回答
反對 回復 2023-02-24
?
縹緲止盈

TA貢獻2041條經驗 獲得超4個贊

您只需使用Element.classList.toggle('YOUR_CLASS')doc )來簡化這些

window.onload = function() {

  var hdr = document.querySelectorAll('header');

  for (var i = 0; i < hdr.length; i++) {

    hdr[i].onclick = function() {

      var elm = this.closest('section').querySelector('article');

      elm.classList.toggle('dsplyBlck');

    }

  }

}

<html>


<head>

  <style>

    .dsplyNne {

      display: none;

    }

    

    .crsr {

      cursor: pointer;

    }

    

    .dsplyBlck {

      display: block;

    }

  </style>

</head>


<body>

  <section>

    <header class='crsr'>

      Header

    </header>

    <article class='dsplyNne'>

      Details

    </article>

  </section>

  <section>

    <header class='crsr'>

      Header

    </header>

    <article class='dsplyNne'>

      Details

    </article>

  </section>

</body>


</html>



查看完整回答
反對 回復 2023-02-24
  • 3 回答
  • 0 關注
  • 135 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號