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循环似乎是正确的，所以我不确定是什么问题。抱歉，如果看起来非常明显，我仍然是 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

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

1 个答案: