JavaScript -向每个类名随机分配8个唯一的编号

Question

我需要随机分配6个唯一的数字(0-5)到6个类名。每个类名对应一个数字

这是如何使用的:当点击汉堡包图标时，菜单打开并显示6行个人姓名，每一行都有特定的背景图像。“过渡”是为配置文件的楼梯-步进。

这是我到目前为止所得到的，但我得到了重复的数字。我希望号码是随机分配的，所以每次打开菜单时，配置文件的顺序是不同的。

var generate_random_number = function() {
    var number = Math.floor(Math.random() * 6);
    return number;
};

var build_menu_profiles = function() {
    $(".profile-0").html("<div class='profile-title'><span class='emphasis'>Profile</span> 1</div>");
    $(".profile-1").html("<div class='profile-title'><span class='emphasis'>Profile</span> 2</div>");
    $(".profile-2").html("<div class='profile-title'><span class='emphasis'>Profile</span> 3</div>");
    $(".profile-3").html("<div class='profile-title'><span class='emphasis'>Profile</span> 4</div>");
    $(".profile-4").html("<div class='profile-title'><span class='emphasis'>Profile</span> 5</div>");
    $(".profile-5").html("<div class='profile-title'><span class='emphasis'>Profile</span> 6</div>");
};

var animate_menu_profiles = function(i) {
    i = 0; 

    $(".profiles").each(function(i) {
        $(this).toggleClass("transition-" + i);
        $(this).toggleClass("profile-" + generate_random_number());

        build_menu_profiles();
    });
};

Answer 1

你不想产生随机数，而是想要洗牌一组已知的六个数字。有一种方法可以做到：

var indices = [0,1,2,3,4,5].sort(function(a,b) { return Math.random()-0.5; });
  // produces [3,1,5,4,0,2] or whatever

然后，您可以在循环中使用它，如下所示：

$(".profiles").each(function(i) {
    $(this).toggleClass("transition-" + i);
    $(this).toggleClass("profile-" + indices[i]);
    ...

请注意，像这样将.sort()和Math.random()一起使用是一种黑客行为，但就您的目的而言，它应该运行得足够好。

但是，您现有的.each()循环不会完成这项工作。当前，当它处理每个元素时，它使用.toggle()，这意味着如果元素已经具有profile-x类名，它将被删除，否则将被添加。再加上随机化，一些元素最终将没有profile-x类，而有些元素最终会有一个以上的类。

在我看来，最简单的事情是实际上移动元素，而不是改变它们的类。我假设他们有一个与class="profile-container"共同的父母

var animate_menu_profiles = function(i) {
    var $profileContainer = $(".profile-container");
    var $profiles = $(".profiles");
    $profiles.sort(function(a,b) { return Math.random()-0.5; });
    $profiles.each(function(i){
        $(this)
          .toggleClass("transition-" + i)
          .appendTo($profileContainer);
    });

    build_menu_profiles();
};

演示：https://jsfiddle.net/okz4y1jL/2/

Answer 2

我更喜欢nnnnnn的回答，但对于你的问题：

这里的问题是您得到了重复的数字，所以在返回之前检查是否已经返回了该数字：

https://jsbin.com/watuvi/1/edit?js,console

var numbers = [];
var generate_random_number = function() {
  var number = Math.floor(Math.random() * 6);
  if (numbers.indexOf(number) === -1) {
    numbers.push(number);
  } else {
    return generate_random_number();
  }
};

generate_random_number();
generate_random_number();
generate_random_number();
generate_random_number();
generate_random_number();
generate_random_number();

console.log(numbers);