将jQuery插件分配给多个元素

到目前为止我已经在网上浏览了5个小时，我找不到任何问题的解决方案：我编写了一个插件，它可以对任何给定的元素进行打字效果，只有在我使用的情况下它才能完美运行它在一个元素上，但是当我想在第二个元素上使用它时，它只执行第二个元素，这就是为什么：在我的插件中，我使用了一些“setInterval”以特定的速度键入并按顺序检查字母为了延迟某些字母，当我同时调用插件两次或多次时会出现问题，这会将新值设置为变量并将间隔与新设置的值冲突并将所有内容混淆。

这是代码：

(function ($) { //typing effect for text $.fn.typingText = function (options) { var setting = $.extend({ //the starting point ==> *(it starts typing when the scrollbar hit the starting point) start: 0, //the user given delay character ==> *(it delays the typing when it hits this character) ==> *(must be a character not a digit or alphabet) delayChar: '.', //the speed of typer ==> *(must be at least 50) speed: 100, //the delay duration when it hits delaying characters ==> *(delaying characters are ? ! . and any other given character in delayChar variable) delay: 500 }, options); if (setting.speed < 50) { setting.speed = 50; } if (setting.delay = setting.start) { $(this).css('display', 'block'); window.text = $(this).text(); window.textLength = window.text.length; window.char = 0; setting.delayChar = '^\\' + setting.delayChar; $(this).text(''); $(this).html(''); $(this).append('|'); window.blinking = setInterval(function () { $('.blinkingLine').animate({ opacity: 0 }, 300); setTimeout(function () { $('.blinkingLine').animate({ opacity: 1 }, 300); }, 300); }, 600); function type() { window.that.children('.textLine').text(window.text.substr(0, window.char)); window.lastChar = window.that.children('.textLine').text().slice(window.that.children('.textLine').text().length - 1); window.char++; if (window.char > window.textLength) { window.that.children('.textLine').text(window.that.children('.textLine').text().substr(0, window.textLength)); $('.blinkingLine').remove(); clearInterval(window.startTyping); clearInterval(window.blinking); clearInterval(window.checking); } } window.timer = 0; window.startTyping = setInterval(type, setting.speed); window.checking = setInterval(function () { if (!window.delaying || typeof window.delaying == 'undefined' || window.timer >= setting.delay) { if (window.lastChar.match('^\\?') || window.lastChar.match('^\\.') || window.lastChar.match('^\\!') || window.lastChar.match(setting.delayChar)) { if (window.timer >= setting.delay) { window.timer = 0; window.char++; type(); window.startTyping = setInterval(type, setting.speed); window.delaying = false; } else { window.delaying = true; clearInterval(window.startTyping); window.startTyping = null; } } } else { window.timer = window.timer + 50; } }, 50); } }; })(jQuery); $(function () { $('#title').typingText(); $('#title2').typingText(); }); 

这里是jsFiddle来查看代码和问题。

我知道它必须对我编写插件的方法做一些事情，但我在网上尝试了几个建议，例如面向对象的插件编写，但仍然无法提出解决方案！ 任何帮助或建议将不胜感激。

Answer 1

我自己找到了答案，问题是我必须将所有变量和间隔定义为私有变量或函数，这样它们就不会被覆盖，然后我不得不添加一小段代码来使我的函数重复自己所有选定的元素。

这是我最终完成的最终代码。

看看这个jsFiddle

 (function($){ //typing effect for text //start of the plugin var typingTextFunc= function(options, elem){ var setting= $.extend({ //the starting point //*(it starts typing when the scrollbar hit the starting point) start:0, //the user given delay character //*(it delays the typing when it hits elem character) ==> *(must be a character not a digit or alphabet) delayChar:'.', //the speed of typer //*(must be at least 50) speed:100, //the delay duration when it hits delaying characters //*(delaying characters are ? ! . and any other given character in delayChar variable) delay:500 },options); if(setting.speed<50){ setting.speed=50; } if(setting.delay<100){ setting.delay=100; } setting.delayChar=setting.delayChar.slice(0,1); var that=$(elem); if($(document).scrollTop()>=setting.start){ $(elem).css('display','block'); var text=$(elem).text(); var textLength=text.length; var char=0; $(elem).text(''); $(elem).html(''); $(elem).append('|'); var blinking=setInterval(function(){ that.children('.blinkingLine').animate({opacity:0},300); setTimeout(function(){ that.children('.blinkingLine').animate({opacity:1},300); },300); },600); var lastChar=''; function type(){ that.children('.textLine').text(text.substr(0,char)); lastChar=that.children('.textLine').text().slice(that.children('.textLine').text().length-1); char++; if(char>textLength){ that.children('.textLine').text(that.children('.textLine').text().substr(0,textLength)); that.children('.blinkingLine').remove(); clearInterval(startTyping); clearInterval(blinking); clearInterval(checking); } } var timer=0; var delaying=false; var startTyping=setInterval(type,setting.speed); var checking= setInterval(function(){ if(typeof delaying=='undefined' || timer>=setting.delay || delaying==false){ if(lastChar=='?' || lastChar=='.' || lastChar=='!' || lastChar==setting.delayChar){ if(timer>=setting.delay){ timer=0; char++; type(); startTyping=setInterval(type,setting.speed); delaying=false; } else{ delaying=true; clearInterval(startTyping); startTyping=null; } } } else{ timer=timer+50; } },50); } }; $.fn.typingText= function(options){ if($(this).data('typed')) return; return $(this).each(function(){ typingTextFunc(options, this); $(this).data('typed',true); }); }; //end of the plugin }(jQuery)); $(function(){ $('#title1').typingText(); $('#title2').typingText(); });