javascript - jQuery 使用 chickedinner.js 从数组中加载随机图像，在 Chrome 中返回 'undefined'

Question

我使用开发者网站的信息页面设置了以下 jQuery 脚本，但 Chrome 一直返回“未定义”。

<script src="//code.jquery.com/jquery-1.11.2.min.js""></script>

(function($) {
    $('.js-chickendinner-bg').chickenDinner = {
        defaults: {
            path: 'http://127.0.0.1:4000/covers/',
            altTag: ['Cover'],
            fadeInTime: 1800,
            cssBG: 'true',
            TheImages: ['cover1.jpg', 'cover2.jpg', 'cover3.jpg', 'cover4.jpg', 'cover5.jpg', 'cover6.jpg', 'cover7.jpg', 'cover8.jpg', 'cover9.jpg', 'cover10.jpg', 'cover11.jpg', 'cover12.png', 'cover13.png', 'cover14.png']
        }
    };

    $.fn.extend({
        chickenDinner: function(options) {
            $.extend({}, $.chickenDinner.defaults, options);
            return this.each(function() {
                var TheImages = options.TheImages;
                var RandomMath = Math.floor(Math.random() * TheImages.length);
                var SelectedImage = TheImages[RandomMath];
                var imgPath = options.path + SelectedImage;
                var altTag = options.altTag;
                // Fade in Times
                var fadeInTime = options.fadeInTime;
                //Fade In animation - hide first
                $(this).css('display', 'none').fadeIn(fadeInTime);
                if (options.cssBG == 'true') {
                    $(this).css('background-image', 'url(' + imgPath + ')');
                } else {
                    $(this).attr({
                        src: imgPath,
                        alt: altTag
                    });
                }
            });
        }
    });
}(jQuery));

<div class="site-header-container has-cover" class="js-chickendinner-bg" style="background-image: url({{ site.cover | prepend: site.baseurl }});">
  <div class="scrim {% if site.cover %}has-cover{% endif %}">
    <header class="site-header">
      <h1 class="title">{{ site.title }}</h1>
      {% if site.subtitle %}
      <p class="subtitle">{{ site.subtitle }}</p>{% endif %}
    </header>
  </div>
</div>

我想使用这个脚本来随机加载我网站主页上的图像，由 Jekyll 构建和提供服务(因此是上面用于测试的本地服务器)。

据我了解，div class="js-chickendinner-bg"应该按照我的方式与 jQuery 函数一起使用，但显然还是有问题。

Answer 1

这是因为您从数组的长度中选择一个随机数，但数组索引从 0 开始。在您的情况下，随机数将介于 1 和 14 之间，但您的数组索引范围将从 0 到13. 由于你的随机数有时会大于数组的最高索引。

如果您修改此行以从随机值中减去 1:

var RandomMath = Math.floor(Math.random() * TheImages.length) - 1;

这将防止您的随机值太大。