获取 class 添加了 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');
        }
    });
}

上面的代码，在所有包含 class "course" 的元素上添加了一个事件监听器，这样当一个带有 class 的元素被点击时， class "course-active" 被添加到它或删除，如果它已经有它。

我想要的是在单击时也获得添加 "course-active" 的所有带有 class 的元素。

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

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

添加了class，我使用chrome devtools检查过。
为什么找不到元素？

编辑：HTML 根据要求

<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>

我上面提到的元素。

编辑 2

问题毕竟是错字！

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

糟糕！我想我需要给自己泡杯咖啡，呵呵

Answer 1

document.getElementsByClass 不正确。

尝试document.getElementsByClassName

此外，您在示例中查找的 class 名称也不正确。当您设置的 class 名称为 active-course.

时，您正在尝试获取名称为 course-active 的元素

Answer 2

您正在使用 getElementsByClass 而不是 getElementsByClassName。此外，class 名称 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>

Answer 3

您需要确保引用了正确的 class 名称。在某些情况下，您声明 course-active，而在其他情况下您声明 active-course。此外，您使用的是 .getElementsByClass()，而不是 .getElementsByClassName()。

但是，.getElementsByClassName() is not right for most use cases because it returns a "live" node list which, while ensuring that you always have references to all the items with a certain class, causes it to perform worse than a static one because it has to re-scan the document upon each access of the variable. In most cases .querySelectorAll()更好。

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

最后，不用为 class 测试每个元素，然后手动添加或删除它，只需使用 .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>

获取 class 添加了 javascript 的元素

Get elements with class which was added with javascript

javascript

arrays

onclicklistener

getelementsbyclassname

编辑：HTML 根据要求

编辑 2