纯 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>
慕虎73712783回答
-
呼啦一阵风
我已经重写了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> -
明月笑刀无情
解决方案：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> -
缥缈止盈
您只需使用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>
随时随地看视频慕课网APP
相关分类
JavaScript