切换类不起作用

Question

我有这样的跨度：

<span class="read_more"> Read More </span>

和这样的一些div：

<div class="tab_inner">
    .
    .
    .
    .
</div>

如何为它们切换类（ active ）

这是我的代码：

var showTab = document.getElementsByClassName("read_more");
var tabContent = document.getElementsByClassName("tab_inner");

function showTabContent(event) {
    for (var i = 0; i < showTab.length; i++) {
        showTab[i].addEventListener('click', function() {
            tabContent.toggle('active');
        });
    }
}

并且我无法在函数中使用document.getElementsByClassName或document.getElementsByTagName获取DOM。 只是document.getElementById在函数中工作。

我该怎么办？

Answer 1

您只能在单个元素上的classList上运行切换。 我在下面修改了你的代码

 var showTab = document.getElementsByClassName("read_more"); var tabContent = document.getElementsByClassName("tab_inner"); function showTabContent() { for (var i = 0; i < showTab.length; i++) { (function(index) { showTab[i].addEventListener('click', function() { tabContent[index].classList.toggle('active'); // I have assumed each read more has a corresponding tab content }); })(i); } } showTabContent(); 

 .tab_inner.active { color: red; } 

 <div class="read_more">read more</div> <div class="tab_inner">tab content</div> <div class="read_more">read more</div> <div class="tab_inner">tab content</div> 

Answer 2

您可以调用Element.classList的方法toggle() ，该方法是一个只读属性，它返回元素的类属性的实时DOMTokenList集合。

码：

 var showTab = document.getElementsByClassName('read_more'), tabContent = document.getElementsByClassName('tab_inner'); Array.prototype.forEach.call(showTab, function(elem, index) { elem.addEventListener('click', function() { tabContent[index].classList.toggle('active'); }); }); 

 .read_more { cursor: pointer; } .tab_inner.active { color: red; } 

 <span class="read_more">Read More</span> <div class="tab_inner"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, dignissimos.</p> </div> <span class="read_more">Read More</span> <div class="tab_inner"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati quam dolor quae error eligendi numquam ipsum. Assumenda modi, explicabo.</p> </div> 

另请注意，您可以通过调用Array的forEach()方法迭代类似数组的HTMLCollection 。