Question

假设我有三个<div>元素，选择器为.js-hello，例如：

<div class="js-hello">...</div>
<div class="js-hello">...</div>
<div class="js-hello">...</div>

我希望看起来像这样：

<div class="js-hello">Hello Foo!</div>
<div class="js-hello">Hello Foo!</div>
<div class="js-hello">Hello Foo!</div>

我现在有了这个香草JS（请，没有jQuery）

;(function(root, factory) {
    if(typeof define === 'function' && define.amd) {
        define(['Hello'], function(Hello) {
            return (root.Hello = factory(Hello));
        });
    } else if(typeof exports === 'object') {
        module.exports = factory(require('carousel-js'));
    } else {
        root.Hello = factory(root.Hello);
    }
}(this, function() {

    'use strict';

    var Hello = function(el, name) {

        if (document.querySelector(el)) root.el = document.querySelector(el);
            else return;

        this.name = name;

        this.sayHello();
    };

    Hello.prototype.sayHello = function() {
        return this.el.innerHTML = 'Hello ' + this.name + '!';
    };

    return Hello;
}));

最后，我想调用这个原型插件＆＃39; 每次选择器使用相同的选择器，例如：

var hello = new Hello('.js-hello', 'Foo');

现在，我知道document.querySelector(el)只会找到第一个元素，但我更感兴趣的是能够在页面中找到.js-hello的地方使用它。 document.querySelectorAll(...)不是答案。

我试图弄清楚如何做一些类似于MooTools如何在元素上进行each循环的事情，例如（$$是匹配的所有元素）：

$$('.js-hello').each(function(el) {
    return new Hello(el, 'Foo');
});

我无法绕过它！任何帮助将不胜感激，或者如果有人能指出我回复它的帖子，我发现了zilch！

Answer 1

每次选择器使用相同的选择器
调用'插件'

这没有意义，或者至少是非常糟糕的设计。调用具有相同参数的函数应该会得到相同的结果，而不是使用一些内部的全局计数器来确定您将获得的具有该选择器的多个元素中的哪一个。

相反，您应该更密切地关注MooTools示例。不要将选择器传递给Hello，而是传递元素，并在构造函数之外进行选择。

function Hello(el, name) {
    this.el = el;
    this.name = name;
    this.sayHello();
}
…

var els = document.querySelectorAll(".js-hello");
for (var i=0; i<els.length; i++)
    new Hello(els[i], "Foo");

Javascript原型在同一个类选择器的多个实例上重用？

1 个答案: