使用香草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添加/刪除類到不同的元素後點擊另一個

回答

相關問題