代码之家 › 专栏 › 技术社区 › Dipak

纯JavaScript中的自定义切换函数

javascript

Dipak · 技术社区 · 4 年前

在这里,为什么切换方法不起作用?

我试图在纯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>

1 回复 | 直到 4 年前

Gerard 4 年前

我重写了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>

hgb123 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>

Emy 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>