querySelectorAll 在使用 this.element 时只选择第二个元素

Question

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

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

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

有了这个，我打算使用该特定选择器从每个元素中添加或删除class。但是，它只对最后一个元素起作用。

---

这是我的（相关的）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 中的每个项目执行某些操作（例如添加某个类的成员资格），那么您必须在修改className 时循环遍历els。。