获取使用javascript添加的类的元素

Question

var courses = document.getElementsByClassName('course');

for(var i = 0; i < courses.length; i++) {
    courses[i].addEventListener('click', function() {
        if(this.classList.contains('active-course')) {
            this.classList.remove('active-course');
        } else { 
            this.classList.add('active-course');
        }
    });
}

上面的代码在包含类“course”的所有元素上添加了一个事件监听器，以便在单击具有类的元素时，将“course-active”类添加到其中，或者如果已经拥有它则将其删除。

我想要的是也可以通过点击获得“课程主动”类的所有元素。

当我在click事件函数中添加以下代码时（在if else之后），它会记录0

console.log(document.getElementsByClass('course-active').length);
// The problem was the typo after all!
// Read EDIT 2 below for more information 

该类已添加，我使用chrome devtools进行了检查。 为什么没有找到元素？

---

EDIT : HTML as requested

<div class="card h-100 course">
    <div class="card-block">
    <h4 class="card-title">AMAT122</h4>
    <p class="card-text">Calculus and Analytic Geometry II</p>
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">General Department</li>
    </ul>
</div>
<div class="card h-100 course">
    <div class="card-block">
    <h4 class="card-title">AMAT122</h4>
    <p class="card-text">Calculus and Analytic Geometry II</p>
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">General Department</li>
    </ul>
</div>

我上面提到的要素。

---

EDIT 2

问题毕竟是一个错字！

• 我写了getElementsByClass()而不是getElementsByClassName()
• 我正在寻找一个不同的类.course-active而不是active-course

Ooopsy！我想我需要给自己喝点咖啡，呵呵

Answer 1

您需要确保引用正确的类名。在某些情况下，你陈述course-active，而在其他情况下你陈述active-course。此外，您使用的是.getElementsByClass()，而不是.getElementsByClassName()。

但是，.getElementsByClassName()不适合大多数用例，因为它返回一个“实时”节点列表，虽然确保你总是引用具有某个类的所有项目，但是它会导致它比静态的更差，因为它必须每次访问变量时重新扫描文档。在大多数情况下，.querySelectorAll()更好。

此外，如果将节点列表转换为数组，则可以使用更简单的.forEach()方法迭代数组中的元素。

最后，不要测试类的每个元素，然后手动添加或删除它，只需使用.classList.toggle()方法。

最终的解决方案更高效，更简单：

// Get all the elements with the course class into an array
var courses = Array.prototype.slice.call(document.querySelectorAll('.course'));

// Loop through the array with the more modern and simpler Array.forEach()
courses.forEach(function(course){
    course.addEventListener('click', function() {
        // Just toggle the use of the class instead of testing for it
        course.classList.toggle('active-course');
    });
});

.course { cursor:pointer; }
.active-course { color:red; }

<div class="card h-100 course">
    <div class="card-block">
    <h4 class="card-title">AMAT122</h4>
    <p class="card-text">Calculus and Analytic Geometry II</p>
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">General Department</li>
    </ul>
</div>
<div class="card h-100 course">
    <div class="card-block">
    <h4 class="card-title">AMAT122</h4>
    <p class="card-text">Calculus and Analytic Geometry II</p>
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">General Department</li>
    </ul>
</div>

Answer 2

document.getElementsByClass不正确。

试试document.getElementsByClassName

您在示例中要查找的类名也不正确。当你设置的类名是course-active时，你试图获得名为active-course的元素。

Answer 3

您正在使用getElementsByClass而不是getElementsByClassName。此外，班级名称course-active不是您添加的名称。考虑下面的代码：

var courses = document.getElementsByClassName('course');

for(var i = 0; i < courses.length; i++) {
    courses[i].addEventListener('click', function() {
        if(this.classList.contains('active-course')) {
            this.classList.remove('active-course');
        } else { 
            this.classList.add('active-course');
        }
        console.log(document.getElementsByClassName('active-course').length);
    });
}

<div class="card h-100 course">
    <div class="card-block">
    <h4 class="card-title">AMAT122</h4>
    <p class="card-text">Calculus and Analytic Geometry II</p>
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">General Department</li>
    </ul>
</div>
<div class="card h-100 course">
    <div class="card-block">
    <h4 class="card-title">AMAT122</h4>
    <p class="card-text">Calculus and Analytic Geometry II</p>
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">General Department</li>
    </ul>
</div>