querySelectorAll使用this.element時僅選擇第二個元素

Question

我最近開始學習JavaScript對象，以及諸如jQuery和Modernizr之類的框架的工作方式。

我試圖創建自己的小“框架” ，以進一步學習JavaScript對象如何工作，以及如何充分利用它們。

到目前為止，一切都很順利，直到我嘗試使用querySelectorAll()方法（和for循環）設置全局變量，以使用指定的選擇器捕獲多個元素。

因此，我打算使用該特定選擇器從每個元素中添加或刪除一個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循環似乎是正確的，因此我不確定出什么問題。 道歉，如果它看起來很明顯，但是，我還是香草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 。