JavaScript 全局数组未定义，尽管它在警报中显示

Question

我在 SharePoint 中编写了一个 JQuery 脚本来 chop 多行文本列。下面是脚本:

<script>

 window.$divs = [];
 window.$i = 0;
 window.textFull = new Array();

 $(document).ready(function(){
 window.setInterval(function(){
  /// call your function here
 $divs = $("[class^=ExternalClass]");
 for($i=0;$i<$divs.length;$i++)
 {
  textFull[$i] = $($divs[$i]).html();
  if(typeof textFull[$i] != 'undefined' && textFull[$i].length > 50)
  {
   //alert($textFull[$i]); this alert show the correct text
   $($divs[$i]).html(textFull[$i].substring(0,49)+"<a href='javascript:alert(textFull[$i]);'>...more</a>");
  }
 }
}, 500);


 });

 </script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

在上面的代码中，“javascript:alert(textFull[$i])”在警报中显示“未定义”。但上面的警报显示了正确的文本。另外，当我使用变量而不是数组时，它在 anchor 标记内的警报中运行良好。我还将该数组声明为全局数组。那么我错过了什么？

Answer 1

您在使用 for 循环时遇到了经典问题，而不使用闭包来跟踪索引

如果该数组仅用于修改 html，则无需创建该数组

使用 html(fn) 和 jQuery 事件处理程序可以更简单地做到这一点

$("[class^=ExternalClass]").html(function(index, oldhtml){
   if(oldhtml.length >=50){
       // store the full html in element data
       $(this).data('html', oldhtml)
       return oldhtml.substring(0,49)+"<a class="more-btn">...more</a>"
   } else{
       return oldhtml
   }
}).find('.more-btn').click(function(){
     var $div =  $(this).parent();
     $div.html( $div.data('html'));    
});