Question

JSFiddle： http://jsfiddle.net/WA4eD/4/

JQuery的：

$('h3').each(function() {
    var colors = [],
        availColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],
        randomColor;
    $('span', this).each(function() {
        do {
            randomColor = availColors[Math.floor(Math.random()*availColors.length)];
        }
        while ($.inArray(randomColor, colors) != -1)

        colors.push(randomColor);

        $(this).css('color', randomColor);
    });
});

您看到的这个脚本是我尝试在我的网站中实现的，但是我所做的所有尝试都失败了。

查看来源：view-source：http://rafflebananza.com/new-website/index.html

目前我页面上的脚本不是我尝试实施的唯一地方，但所有这些都会产生相同的结果。

随意使用我的脚本，如果你有一堆h3标签并且里面的字符在span类中，它将随机化颜色，在页面加载时产生不同的结果。

Answer 1

我会删除do while循环，如评论中所述。

Here is your updated fiddle有一种方法可以做到这一点

var defaultColors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'],
    availColors = [],
    randomColor = '';

$('h3 span').each(function() 
{
        if(availColors.length == 0)
            availColors = defaultColors.slice(0);

        randomColor = availColors[Math.floor(Math.random() * availColors.length)];
        availColors = $.grep(availColors, function(value) 
                        {
                              return value != randomColor;
                        });
        $(this).css('color', randomColor);
});

Answer 2

您正在尝试访问随机颜色生成器中的出界数组索引，同时将生成的随机数乘以数组长度。因此，如果随机生成器返回任何大于.9的值，则将其乘以array.length，从而尝试访问不存在的数组元素。我相信这会导致迷恋。

使用0到array.length的范围修复以下行。

 randomColor = availColors[Math.floor(Math.random()*availColors.length)];

您可以指定最小值和最大值以获取绑定范围内的随机数组索引。

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

此外，在您的情况下，do while循环可能会永远运行，因为while循环中的退出条件可能不会发生，原因与上述相同。

你可以做的最简单的改变是

randomColor = availColors[Math.floor(Math.random()*(availColors.length-1))];

为什么我的JQuery脚本会崩溃我的页面？

2 个答案: