JavaScript插件不止一次触发

Question

所以我有一个javascript插件

;(function(window){
//some functions
function plugin(el, options){
}
plugin.prototype = {
//other functions
}
})(window);

然而，这并不是那么重要 然后我像这样调用这个插件

document.addEventListener('DOMContentLoaded', function() {
  var el = document.querySelectorAll('[data-tooltip]')
  for(i = 0; i < el.length; i++){
    new tooltipizeIt(el[0], { effect : 'fade-and-move', theme : 'custom', width : 200, position : 'right'});
    new tooltipizeIt(el[1], { theme : 'light', effect : 'fade', width : 120, position : 'top'});
    new tooltipizeIt(el[2], { effect : 'scale', theme : 'dark', position : 'bottom'});
    new tooltipizeIt(el[3], { effect : 'no-effect', theme : 'custom', position : 'top', width : 135});
    new tooltipizeIt(el[4], { effect : 'fade-and-move', theme : 'light', position : 'bottom', width : 400});
    new tooltipizeIt(el[5], { effect : 'fade-and-move', theme : 'light', position : 'left', width : 400, ajax : true});
  }
}, false);

如你所见，我已经六次调用此插件，但插件会为每个el元素触发六次，如果我将其调用七次，则会触发七次，依此类推。
知道某人为什么以及是否有解决方案来解决这个问题？

修改的 我添加了一个图像，因为您看到插件为同一个元素创建了六个工具提示

Answer 1

我同意@adeneo它正在做你正在告诉它的事情。 由于您的for循环，它始终会进行6*el.length次呼叫。

具体来说，data-tooltip的前6个元素中的每个元素都会发生相同的调用6次。这就是for循环工作的方式。

例如，第一个元素将发生此特定调用6次：

new tooltipizeIt(el[0], { effect : 'fade-and-move', theme : 'custom', width : 200, position : 'right'});

虽然第二个将具体发生6次：

new tooltipizeIt(el[1], { theme : 'light', effect : 'fade', width : 120, position : 'top'});

等等。如果有第7个元素，它根本就不会被调用。同样，如果少于6个元素属性，它将失败，因为您直接访问每个属性，el[5]将是undefined。

以下是对此类工作如何运作的演示，但需要更多细节才能真正使您的代码按照您的意愿行事。希望将此代码与输出进行比较将有助于您理解此处涉及的概念。

＆＃13;

＆＃13;

// This is a simple call to show some output
function log(message) {
  $("#log").text($("#log").text() + message + '\n');
}

//
// Here's the real stuff
//

// Create an array with six values, much like your example.
var el = ['A', 'B', 'C', 'D', 'E', 'F'];
log("el has " + el.length + " items in it.")

// Loop for as many items as there are in the array.
for (var i = 0; i < el.length; i++) {
  log("  This message is in the loop so it will happen " + el.length + " times.")
  log("  This message is also in the loop so it will also happen " + el.length + " times.")
}

log("");
log("That was " + el.length + " * 2 or " + (el.length * 2) + " messages.")

log("")
log("In your example you actually used each item but you didn't like this...")

for (var i = 0; i < el.length; i++) {
  log("  Do something to " + el[0] + ".")
  log("  Do a second something to " + el[1] + ".")
  log("  Do a third something to " + el[2] + ".")
  log("  Do a forth something to " + el[3] + ".")
  log("  Do a fifth something to " + el[4] + ".")
  log("  Do a sixth something to " + el[5] + ".")
}

log("");
log("That was " + el.length + " * 6 or " + (el.length * 6) + " messages.")

log("")
log("You wanted it to do 6 different things, leaving the loop out would do that.")


log("  Do something to " + el[0] + ".")
log("  Do a second something to " + el[1] + ".")
log("  Do a third something to " + el[2] + ".")
log("  Do a forth something to " + el[3] + ".")
log("  Do a fifth something to " + el[4] + ".")
log("  Do a sixth something to " + el[5] + ".")
  
log("");
log("That was 6  messages.")


log("")
log("Of course that only works if there are exactly 6 items.  Try to do that with 7 items and things get wonky.")


log("  Do something to " + el[0] + ".")
log("  Do a second something to " + el[1] + ".")
log("  Do a third something to " + el[2] + ".")
log("  Do a forth something to " + el[3] + ".")
log("  Do a fifth something to " + el[4] + ".")
log("  Do a sixth something to " + el[5] + ".")
log("  Do a seventh something to " + el[6] + ".")


log("")
log("This just showed undefined but in more complex code it might break all together.")

log("")
log("Had there been 7 items this would all have gone differently.")

el = ['A', 'B', 'C', 'D', 'E', 'F', 'G'];
log("el has " + el.length + " items in it.")

log("  Do something to " + el[0] + ".")
log("  Do a second something to " + el[1] + ".")
log("  Do a third something to " + el[2] + ".")
log("  Do a forth something to " + el[3] + ".")
log("  Do a fifth something to " + el[4] + ".")
log("  Do a six something to " + el[5] + ".")
  
log("");
log("That was still 6 messages because there were exactly 6 calls.")

log("  Do something to " + el[0] + ".")
log("  Do a second something to " + el[1] + ".")
log("  Do a third something to " + el[2] + ".")
log("  Do a forth something to " + el[3] + ".")
log("  Do a fifth something to " + el[4] + ".")
log("  Do a six something to " + el[5] + ".")
  
log("");
log("It is more likly that you intened to one thing to each item.")
for (var i = 0; i < el.length; i++) {
  log("  Do something to " + el[i] + ".")
}

log("");
log("That was " + el.length + " messages.")

log("");
log("Notice that the same thing was done to each item.")

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre id="log"></pre>

＆＃13;

＆＃13;

＆＃13;

我认为你最好描述你想要在这里完成的事情。