Question

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

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

它工作得很好，但我想做到这一点，以便连续不会有两个相同的类。

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

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

Answer 1

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

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

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/

Answer 2

您可以使用数组和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);
}

Answer 3

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);
    }
});

Answer 4

为了解释我对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);
  };
}());

Javascript：随机数为5，在重复使用之前不重复

4 个答案: