jquery插件不起作用？

Question

jquery函数“.textAnim”什么都不做 textTyping_animation（）;工作正常，但.textAnim不起作用。 这里是插件代码：

function textTyping_animation(text,location,speed){ 
var progress = 0; 
var a = setInterval(function(){ 
    progress++; 
    document.getElementById(location).innerHTML = text.substring(0,progress); 
    if(progress == text.length){ 
     clearInterval(a); 
    } 
},speed); 
}; 
(function($){ 
$.fn.textAnim = function(text,speed){ 
    var progress = 0; 
    var a = setInterval(function(){ 
     progress++; 
     $(this).html(text.substring(0,progress)); 
     if(progress == text.length){ 
      clearInterval(a); 
     } 
    },speed); 
}; 
})(jQuery); 

这里是执行：

$(document).ready(function(){ 
starttext = function() 
{ 
    document.getElementById("textbox").style.display = "block"; 
    //textTyping_animation("Dit is een dummy text!","textbox_inner",70); 
     $("#textbox_inner").textAnim("Dit is een dummy text!",70); 
} 
}); 

HTML载入代码：

<script type="text/javascript" language="javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" ></script> 
<script type="text/javascript" language="javascript" src="js/jqueryplugins.js" ></script> 
<script type="text/javascript" language="javascript" src="js/libraries/gamelibrary.js"></script> 

Answer 1

问题是this里面的回调函数传递给setInterval()是窗口，而不是你想要的元素。修改代码以保存textAnim()函数里面this参考（它指的是正确的元素），然后用它传递给setInterval()回调中：

(function($){ 
    $.fn.textAnim = function(text,speed){ 
     var progress = 0, 
      element = this; // this will be the element in the jQuery object 
     var a = setInterval(function(){ 
      progress++; 
      $(element).html(text.substring(0,progress)); 
      if(progress == text.length){ 
       clearInterval(a); 
      } 
     },speed); 
    }; 
})(jQuery); 

这里是一个updated DEMO。

Answer 2

变化

$(document).ready(function(){ 
starttext = function() 
{ 
    document.getElementById("textbox").style.display = "block"; 
    //textTyping_animation("Dit is een dummy text!","textbox_inner",70); 
     $("#textbox_inner").textAnim("Dit is een dummy text!",70); 
} 
}); 

是

$(document).ready(function(){ 
starttext = function() 
{ 
    document.getElementById("textbox").style.display = "block"; 
    //textTyping_animation("Dit is een dummy text!","textbox_inner",70); 
     $("#textbox_inner").textAnim("Dit is een dummy text!",70); 
} 
starttext(); 
}); 

它应该工作;