javascript - 运行初始数组后，Jquery 数组返回未定义

Question

我正在尝试修复这个背景推子， 它有效，但它返回一些未定义的值，我无法弄清楚， 任何帮助将不胜感激。

php 只是读取一个目录并获取图像文件路径，然后创建包含该文本的隐藏跨度。

       $(document).ready(function () {
         /* DocReady */
         var counter = 0;
         var faderImgs = new Array();
         $('span.entry').each(function () {
           var value = 'images/bg/' + $(this).text();
           faderImgs.push(value);
           $('<img />').attr('src', value).appendTo(this).css('display', 'none');
         })

         /* DocReady */

         var intId = setInterval(faderBg, 8000);
         var numItems = $('span.entry').length;

         function faderBg() {

           $('.background-fader').animate({
             'opacity': '0'
           }, 2000, function () {
             $('.background-fader').css('background-image', 'url(' + faderImgs[counter] + ')')
             $('.background-fader').animate({
               'opacity': '1'
             }, 2000)

           })
           counter++;
           if (counter > numItems) {
             var counter = 0;
           }
         }

       });

----------------------------编辑---------------- ----------------------

非常感谢帮助的人， 现在一切都恢复正常了。

Answer 1

您的计数器溢出数组的末尾。当它等于“numItems”时，您希望将其设置回零，而不是当它更大时； JavaScript 数组从零开始，所以最大的索引是 numItems - 1。

       counter++;
       if (counter >= numItems) { // >=, not >
         counter = 0;
       }

此外，当您将“计数器”设置回零时，您不需要 var。您应该使用 .prop() 而不是 .attr() 来设置您创建的那些 <img> 元素的“src”属性。 (我不确定你为什么还要创建这些，除非可能是将图像预取到浏览器缓存中。如果是这样，则无需将 <img> 元素附加到 DOM - 只需创建一个 Image 实例并设置它的“src”属性。)

edit — @charlietfl 正确地指出，杂散的 var 会给您带来严重的问题，因为它会导致其中有一个本地“计数器”变量内功能。事实上，如果它存在于您的真实代码中，我根本无法想象它是如何工作的，因为“计数器”将始终为 undefined(或者我猜在后增量之后为 NaN)。