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进行了检查为什么没有找到元素？

编辑：按要求提供的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()
而我正在寻找另一个班级.course-active而不是。{ active-course

Ooopsy！我想我需要给自己一些咖啡，呵呵

Answer 1

document.getElementsByClass不正确。

尝试document.getElementsByClassName

您在示例中要查找的类名也不正确。当您设置的班级名称为course-active时，您正尝试获取名为active-course的元素。

Answer 2

您使用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>

Answer 3

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

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

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

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

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

＆＃13;

// 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');
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

编辑：按要求提供的HTML

编辑2

3 个答案: