5

我正在使用下面的代码为页面上的每个图像分配一个随机类（共五个）。

$(this).addClass('color-' + (Math.floor(Math.random() * 5) + 1));

它工作得很好，但我想做到这一点，这样就不会连续出现两个相同的班级。

更好的是，如果连续没有两个相同的类，并且在所有 5 个都被使用之前，它也不会多次使用任何类...如，从数组中删除每个使用的类，直到它们全部已经使用过，然后重新开始，不允许前5个中的最后一个和后5个中的第一个颜色相同。

希望这是有道理的，并提前感谢您的帮助。

4

4 回答 4

19

您需要创建一个可能值的数组，并且每次从数组中检索随机索引以使用其中一个值时，都将其从数组中删除。

这是一个通用随机函数，在使用所有值之前不会重复。您可以调用它，然后将此索引添加到类名的末尾。

var uniqueRandoms = [];
var numRandoms = 5;
function makeUniqueRandom() {
    // refill the array if needed
    if (!uniqueRandoms.length) {
        for (var i = 0; i < numRandoms; i++) {
            uniqueRandoms.push(i);
        }
    }
    var index = Math.floor(Math.random() * uniqueRandoms.length);
    var val = uniqueRandoms[index];

    // now remove that value from the array
    uniqueRandoms.splice(index, 1);

    return val;

}

工作演示：http: //jsfiddle.net/jfriend00/H9bLH/

因此，您的代码将是这样的：

$(this).addClass('color-' + (makeUniqueRandom() + 1));

这是一种面向对象的形式，它允许在您的应用程序的不同位置使用其中的多个：

// if only one argument is passed, it will assume that is the high
// limit and the low limit will be set to zero
// so you can use either r = new randomeGenerator(9);
// or r = new randomGenerator(0, 9);
function randomGenerator(low, high) {
    if (arguments.length < 2) {
        high = low;
        low = 0;
    }
    this.low = low;
    this.high = high;
    this.reset();
}

randomGenerator.prototype = {
    reset: function() {
        this.remaining = [];
        for (var i = this.low; i <= this.high; i++) {
            this.remaining.push(i);
        }
    },
    get: function() {
        if (!this.remaining.length) {
            this.reset();
        }
        var index = Math.floor(Math.random() * this.remaining.length);
        var val = this.remaining[index];
        this.remaining.splice(index, 1);
        return val;        
    }
}

样品用法：

var r = new randomGenerator(1, 9);
var rand1 = r.get();
var rand2 = r.get();

工作演示：http: //jsfiddle.net/jfriend00/q36Lk4hk/

于 2013-10-14T00:30:11.973 回答
3

您可以使用数组和splice方法执行以下操作：

var classes = ["color-1", "color-2", "color-3", "color-4", "color-5"];
for(i = 0;i < 5; i++){
  var randomPosition = Math.floor(Math.random() * classes.length);
  var selected = classes.splice(randomPosition,1);
  console.log(selected);
  alert(selected);
}
于 2013-10-14T00:40:17.687 回答
1 
var used = [];
var range = [0, 5];

var generateColors = (function() {
    var current;
    for ( var i = range[0]; i < range[5]; i++ ) {

        while ( used.indexOf(current = (Math.floor(Math.random() * 5) + 1)) != -1 ) ;
        used.push(current);
        $("   SELECTOR     ").addClass('color-' + current);
    }
});
于 2013-10-14T00:55:12.243 回答
1

只是为了解释我对 jfriend00 出色答案的评论，您可以有一个函数以随机顺序返回集合的成员，直到全部返回，然后重新开始，例如：

function RandomList(list) {
  var original = list;
  this.getOriginal = function() {
    return original;
  }
}

RandomList.prototype.getRandom = function() {
  if (!(this.remainder && this.remainder.length)) {
    this.remainder = this.getOriginal().slice();
  }
  return this.remainder.splice(Math.random() * this.remainder.length | 0,1);
}

var list = new RandomList([1,2,3]);

list.getRandom(); // returns a random member of list without repeating until all
                  // members have been returned.

如果列表可以硬编码，您可以将原始列表保存在闭包中，例如

var randomItem = (function() {
  var original = [1,2,3];
  var remainder;
  return function() {
    if (!(remainder && remainder.length)) {
      remainder = original.slice();
    }
    return remainder.splice(Math.random() * remainder.length | 0, 1);
  };
}());
于 2013-10-14T02:11:39.267 回答