javascript - querySelectorAll 在使用 this.element 时仅选择第二个元素

Question

我最近开始学习 JavaScript 对象，以及 jQuery 和 Modernizr 等框架的工作原理。

我尝试创建自己的小“框架”，以进一步了解JavaScript对象如何工作，以及如何充分利用它们的潜力。

到目前为止，一切都进展顺利，直到我尝试使用 querySelectorAll() 方法(和 for 循环) 设置全局变量，以获取多个元素使用指定的选择器。

有了这个，我打算使用特定的选择器从每个元素中添加或删除一个类。然而，它只对这组元素中的最后一个元素起作用。

<小时/>

这是我的(相关)JavaScript:

var aj = function(sr){
    this.selector = sr || null; // set global selector variable
    this.element = null;
}

aj.prototype.init = function(){
    switch(this.selector[0]){
        // first, second, third case e.t.c...
        default:
            var els = document.querySelectorAll(this.selector); // select all elements with specified selector (set above)
            for(var i = 0; i < els.length; i++){
                this.element = els[i];
            }
    }
};

aj.prototype.class = function(type, classes){
    if(type === "add"){ // if the user wants to add a class
        if((" " + this.element.className + " ").indexOf(" " + classes + " ") < 0){
            this.element.className += " " + classes;
        }
    } else if(type === "remove") { // if the want to remove a class
        var regex = new RegExp("(^| )" + classes + "($| )", "g");

        this.element.className = this.element.className.replace(regex, " ");
    }
};

示例:

<div class="example-class">Example</div>
<div class="example-class">Example 2</div> <!-- only this one will be altered !-->
<script>
    $(".example-class").class("add", "classname");
</script>

为什么会发生这种情况？我的 for 循环似乎是正确的，所以我不确定出了什么问题。如果它看起来很明显，我深表歉意，但是，我对 vanilla JavaScript 仍然很陌生。

感谢所有帮助(和建议)，
谢谢。

Answer 1

for(var i = 0; i < els.length; i++){
    this.element = els[i];
}

你有一个循环。每次循环时，它都会为 this.element 分配一个值。

第一次循环时，它会分配 els[0] 的值。第二次它分配 els[1] 的值。

由于只有两个匹配的元素，因此它到达循环末尾并停止。

此时，this.element 仍然等于 els[1]。

<小时/>

如果您想对 els 中的每个项目执行某些操作(例如添加类的成员资格)，那么您必须在执行时循环 els 修改className。