使用香草javascript添加/删除类到不同的元素后点击另一个

我已经通过一些类似的问题，但无法找到一个在香草JS回答如何添加和删除类的具体示例到与点击的元素不同的元素。我知道这与建立一个循环并遍历元素有关，但我在确切的过程中迷失了方向。使用香草javascript添加/删除类到不同的元素后点击另一个

我有一个类名称为faq-container的元素，当我点击其中的任何元素时，我想将类faq-display添加到body标签中。我知道我必须建立一个像for (var i = 0; i < elements.length; i++) { elements[i].classList.remove('hover'); }这样的循环，但我不确定在代码中将它写在哪里以使其工作。我尝试了很多方法，但都失败了。

我目前的脚本如下，我只是针对数组中的第一个元素，但我希望能够单击任何faq-container元素并将类名称添加到第一个且唯一的正文标记中：

document.addEventListener("DOMContentLoaded", function() { 
 

 
    document.getElementsByClassName('faq-container')[0].addEventListener('click', function() { 
 
    var faqToggle = document.getElementsByTagName('body')[0]; 
 
    if (faqToggle.classList.contains('faq-display')) { 
 
     faqToggle.classList.remove('faq-display'); 
 
     // alert("remove faq display!"); 
 
    } else { 
 
     faqToggle.classList.add('faq-display'); 
 
     // alert("add faq display!"); 
 
    } 
 
    }); 
 

 

 
});

<div class="faq-container cf" id="faq-container"> 
 
    <h3 <?=ifxless::element('name')?>><?=ifxless::fill($this,'name');?> </h3> 
 

 
    <div class="faq-content"> 
 
    <div class="h_line">&nbsp;</div> 
 

 
    <div class="faq-bullets" <?=ifxless::element('content')?>> 
 
     <?=ifxless::fill($this, 'content');?> 
 
    </div> 
 

 
    </div> 
 

 
</div>

来源

2017-01-09 sdawes

请更新与HTML代码片段，使其成为[MCVE] – mplungjan

的标记是用公司的内容管理系统的一部分代码块。但我会将其添加到我的示例中... – sdawes

请参阅我的更新以获得更好的解决方案。 – mplungjan

document.addEventListener("DOMContentLoaded", function() { 
    var faqContainers = document.getElementsByClassName('faq-container'); 
    var faqToggle = document.getElementsByTagName('body')[0]; 
    for (var i = 0; i < faqContainers.length; i++) { 

    faqContainers[i].addEventListener('click', function() { 

     if (faqToggle.classList.contains('faq-display')) { 
     faqToggle.classList.remove('faq-display'); 
     // alert("remove faq display!"); 
     } else { 
     faqToggle.classList.add('faq-display'); 
     // alert("add faq display!"); 
     } 

    }); 
    } 


});

来源

2017-01-09 14:57:47

@mplungjan感谢编辑 –

感谢您的！ – sdawes

除了我第一次和使用更好的querySelectorAll这和我的区别是什么？ – mplungjan

您需要循环：

var faqs = document.querySelectorAll('.faq-container'); 
for (var i=0;i<faqs.length;i++) { 
    faq[i].addEventListener('click', toggleFaq); 
    // or faq[i].onclick=toggleFaq; 
} 


function toggleFaq() { 
    var faqToggle = document.getElementsByTagName('body')[0]; 
    if (faqToggle.classList.contains('faq-display')) { 
    faqToggle.classList.remove('faq-display'); 
    // alert("remove faq display!"); 
    } else { 
    faqToggle.classList.add('faq-display'); 
    // alert("add faq display!"); 
    } 
}

注意：如果你有很多这些div，你最好有一个父母的事件处理程序，并测试被点击的东西。我也给你一个跨浏览器附加的事件处理程序

function addEvent(element, myEvent, fnc) { return ((element.attachEvent) ? element.attachEvent('on' + myEvent, fnc) : element.addEventListener(myEvent, fnc, false)); } 

var topContainer = document.getElementById('faqContainerParent'); 

addEvent(topContainer,'click', function(e) { 
    var tgt = e.target; 
    if (tgt && tgt.nodeName === 'DIV') { 
    if (tgt.classList.contains("faq-container")) { 
     toggleFaq(); 
    } 
    } 
}

来源

2017-01-09 14:52:34 mplungjan

使用香草javascript添加/删除类到不同的元素后点击另一个

回答

相关问题