猿问

纯 JavaScript 中的自定义切换功能

在这里，为什么切换方法不起作用？


我正在尝试运行自定义函数并在纯 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>


慕虎7371278
浏览 152回答 3
3回答

呼啦一阵风

我已经重写了javascript。源文件中的文档。window.onload = () => {&nbsp; // Capture the header elements in an array&nbsp; const hdr = [...document.querySelectorAll('header')];&nbsp; // Add an eventlistener for each header element&nbsp; hdr.map( (h) => {&nbsp; &nbsp; h.addEventListener( "click", (e) => {&nbsp; &nbsp; &nbsp; // Toggle the class for the next sibling (article)&nbsp; &nbsp; &nbsp; const t = e.currentTarget.nextElementSibling;&nbsp; &nbsp; &nbsp; t.classList.toggle("dsplyNne");&nbsp; &nbsp; });&nbsp; });}.dsplyNne {&nbsp; display: none;}.crsr {&nbsp; cursor: pointer;}.dsplyBlck {&nbsp; display: block;}<section>&nbsp; <header class='crsr'>&nbsp; &nbsp; Header&nbsp; </header>&nbsp; <article class='dsplyNne'>&nbsp; &nbsp; Details&nbsp; </article></section><section>&nbsp; <header class='crsr'>&nbsp; &nbsp; Header&nbsp; </header>&nbsp; <article class='dsplyNne'>&nbsp; &nbsp; Details&nbsp; </article></section>
0

明月笑刀无情

解决方案：function toggleElm(elem) {&nbsp; let x = document.getElementById(elem);&nbsp; if (x.classList.contains('dsplyBlck')) {&nbsp; &nbsp; x.classList.add('dsplyNne');&nbsp; &nbsp; x.classList.remove('dsplyBlck');&nbsp; } else {&nbsp; &nbsp; x.classList.add('dsplyBlck');&nbsp; &nbsp; x.classList.remove('dsplyNne');&nbsp; }}&nbsp;<html>&nbsp; <head>&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; .dsplyNne{&nbsp; &nbsp; &nbsp; &nbsp; display:none;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .crsr{&nbsp; &nbsp; &nbsp; &nbsp; cursor:pointer;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; .dsplyBlck{&nbsp; &nbsp; &nbsp; &nbsp; display:block;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; </style>&nbsp; </head>&nbsp; <body>&nbsp; &nbsp; <section>&nbsp; &nbsp; &nbsp; <header class='crsr' onclick="toggleElm('target1')">&nbsp; &nbsp; &nbsp; &nbsp; Header&nbsp; &nbsp; &nbsp; </header>&nbsp; &nbsp; &nbsp; <article class='dsplyNne' id="target1">&nbsp; &nbsp; &nbsp; &nbsp; Details&nbsp; &nbsp; &nbsp; </article>&nbsp; &nbsp; </section>&nbsp; &nbsp; <section>&nbsp; &nbsp; &nbsp; <header class='crsr' onclick="toggleElm('target2')">&nbsp; &nbsp; &nbsp; &nbsp; Header&nbsp; &nbsp; &nbsp; </header>&nbsp; &nbsp; &nbsp; <article&nbsp; class='dsplyNne' id="target2">&nbsp; &nbsp; &nbsp; &nbsp; Details&nbsp; &nbsp; &nbsp; </article>&nbsp; &nbsp; </section>&nbsp; </body></html>
0

缥缈止盈

您只需使用Element.classList.toggle('YOUR_CLASS')(&nbsp;doc&nbsp;)来简化这些window.onload = function() {&nbsp; var hdr = document.querySelectorAll('header');&nbsp; for (var i = 0; i < hdr.length; i++) {&nbsp; &nbsp; hdr[i].onclick = function() {&nbsp; &nbsp; &nbsp; var elm = this.closest('section').querySelector('article');&nbsp; &nbsp; &nbsp; elm.classList.toggle('dsplyBlck');&nbsp; &nbsp; }&nbsp; }}<html><head>&nbsp; <style>&nbsp; &nbsp; .dsplyNne {&nbsp; &nbsp; &nbsp; display: none;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; .crsr {&nbsp; &nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; .dsplyBlck {&nbsp; &nbsp; &nbsp; display: block;&nbsp; &nbsp; }&nbsp; </style></head><body>&nbsp; <section>&nbsp; &nbsp; <header class='crsr'>&nbsp; &nbsp; &nbsp; Header&nbsp; &nbsp; </header>&nbsp; &nbsp; <article class='dsplyNne'>&nbsp; &nbsp; &nbsp; Details&nbsp; &nbsp; </article>&nbsp; </section>&nbsp; <section>&nbsp; &nbsp; <header class='crsr'>&nbsp; &nbsp; &nbsp; Header&nbsp; &nbsp; </header>&nbsp; &nbsp; <article class='dsplyNne'>&nbsp; &nbsp; &nbsp; Details&nbsp; &nbsp; </article>&nbsp; </section></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答