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