JavaScript—；为每个类名随机分配8个唯一的数字

我需要随机分配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();
    });
};

var生成随机数=函数（）{
var number=Math.floor（Math.random（）*6）；
返回号码；
};
var build_menu_profiles=函数（）{
$（“.profile-0”）.html（“profile 1”）；
$（“.profile-1”）.html（“profile-2”）；
$（“.profile-2”）.html（“profile-3”）；
$（“.profile-3”）.html（“profile-4”）；
$（“.profile-4”）.html（“profile-5”）；
$（“.profile-5”）.html（“profile-6”）；
};
var animate_menu_profiles=函数（i）{
i=0；
$（“.profiles”）。每个（功能（i）{
$（this.toggleClass（“转换-”+i）；
$（this.toggleClass（“profile-”+generate_random_number（））；
构建菜单配置文件（）；
});
};

您不希望生成随机数，而是希望将一组已知的六个数字混洗。有一种方法可以做到这一点：

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”

相同的父级：

---

演示：

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

这里的问题是，您会得到重复的数字，因此在返回之前，请检查您是否已返回该数字：

---

非常感谢。这是有道理的，并且确实有助于找到更好的方法。它起作用了。我必须将转换移到它自己的功能中，这样动画才能工作。当页面加载时，它构建配置文件并将其洗牌，然后当菜单打开时，配置文件已经在那里设置动画。

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

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