我已经查看了许多类似的问题,但找不到一个在vanilla JS中回答的具体示例如何将类添加到一个不同的元素中并从中删除.我知道它与设置循环和遍历元素有关,但我在确切的过程中迷路了.
我有许多具有类名的元素,faq-container当我点击其中任何一个时,我希望将该类faq-display添加到body标签中.我知道我必须设置一个循环,for (var i = 0; i < elements.length; i++) { elements[i].classList.remove('hover');
}但我不确定在代码中写入它的确切位置以使其工作.我尝试了很多方法,但都失败了.
我当前的脚本如下所示,我只是将数组中的第一个元素作为目标,但我希望能够点击任何faq-container元素并将类名添加到第一个也是唯一的body标记:
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"> </div>
<div class="faq-bullets" <?=ifxless::element( 'content')?>>
<?=ifxless::fill($this, 'content');?>
</div>
</div>
</div>javascript class getelementsbytagname getelementsbyclassname