代码之家 › 专栏 › 技术社区 › johnchar

使用javascript添加的类获取元素

getelementsbyclassname onclicklistener arrays javascript

johnchar · 技术社区 · 8 年前

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 event函数中添加以下代码时(在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开发工具进行了检查。
为什么找不到元素?

按要求编辑: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

哎哟!我想我需要给自己弄点咖啡,呵呵

3 回复 | 直到 8 年前

Carter Capocaccia 8 年前

document.getElementsByClass 不正确。

尝试 document.getElementsByClassName

此外,您在示例中查找的类名也不正确。您正在尝试获取具有名称的元素 course-active 当您设置的类名为 active-course .

Scott Marcus 8 年前

您需要确保引用了正确的类名。在某些情况下,您可以声明 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>

edkeveked 8 年前

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