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

在同一类选择器的多个实例上重用Javascript原型?,javascript,Javascript,假设我有三个元素,选择器为.js helloon,例如: <div class="js-hello">...</div> <div class="js-hello">...</div> <div class="js-hello">...</div> var hello = new Hello('.js-hello', 'Foo'); 最后,我想使用相同的选择器每次调用这个原型“plugin”,例如: <div cl

假设我有三个
元素,选择器为
.js hello
on,例如:

<div class="js-hello">...</div>
<div class="js-hello">...</div>
<div class="js-hello">...</div>
var hello = new Hello('.js-hello', 'Foo');
最后,我想使用相同的选择器每次调用这个原型“plugin”,例如:

<div class="js-hello">...</div>
<div class="js-hello">...</div>
<div class="js-hello">...</div>
var hello = new Hello('.js-hello', 'Foo');
现在,我知道
document.querySelector(el)
只能找到第一个元素,但我更感兴趣的是能够在页面中找到
.js hello
的地方使用它
document.querySelectorAll(…)
不是很好的答案

我试图找出如何做一些类似于MooTools如何对元素执行
每个
循环的事情,例如($$表示所有元素都匹配):

我不能完全相信它!任何帮助都将不胜感激,或者如果有人能给我指出一个可以回答这个问题的帖子,我已经找到齐尔奇了

每次使用相同的选择器调用每个选择器的“插件”

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

相反,您应该更密切地遵循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");
函数Hello(el,name){
this.el=el;
this.name=名称;
这个;
}
…
var els=document.querySelectorAll(“.js hello”);

对于(var i=0;iSo,您希望每个元素有一个
Hello
实例,还是所有元素都有一个实例?@Bergi,每个元素有一个实例,对不起。您完全正确,这不是出于设计(也不是如何做到的),我想我把这里的词弄乱了一点!从某种意义上说,这是可行的,但实际上我在一个更大的例子中使用了它。我有一个旋转木马,当我在旋转木马控件上单击下一步/上一步时,它只在你操作的第一个旋转木马上工作(例如,单击导航),而不是其他的旋转木马。这不是JSIDLE:-)请注意,
currentIndex
是该代码中的一个全局变量。它应该是特定于实例的!哦,我通常使用JSFIDLE,这是因为我有Sass,所以我需要将它粘贴到某个地方哈哈!食物呐喊,谢谢你的帮助。:-)
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");