Question

我有这种情况。页面上有六个不同位置的占位符。我有六个不同的单词，每个单词应该随机分配给一个占位符。

我想要实现的是没有重复的单词，例如占位符nr.3得到＆＃34; Word-1＆＃34;和占位符nr.6得到＆＃34; Word-1＆＃34;。

这是我用来随机地将字词分配给占位符的JavaScript，在我的案例中是段落元素。

var word_1 = $('#main').append('<p class="word word-1"></p>'),
word_2 = $('#main').append('<p class="word word-2"></p>'),
word_3 = $('#main').append('<p class="word word-3"></p>'),
word_4 = $('#main').append('<p class="word word-4"></p>'),
word_5 = $('#main').append('<p class="word word-5"></p>'),
word_6 = $('#main').append('<p class="word word-6"></p>');

var pos_1 = $('.word-1').css({'left' : '0', 'right' : '0', 'top' : '48%'})
var pos_2 = $('.word-2').css({'left' : '-400px', 'right' : '0', 'top' : '58%'})
var pos_3 = $('.word-3').css({'left' : '0', 'right' : '-400px', 'top' : '36%'})
var pos_4 = $('.word-4').css({'left' : '0', 'right' : '-320px', 'top' : '61%'})
var pos_5 = $('.word-5').css({'left' : '-500px', 'right' : '0', 'top' : '36%'})
var pos_8 = $('.word-6').css({'left' : '-320px', 'right' : '0', 'top' : '46%'})

var words = ['word-1', 'word-2', 'word-3', 'word-4', 'word-5', 'word-6'];

$('.word').each(function(){
classIndex = Math.floor(Math.random() * words.length);
$(this).text(words[classIndex]);
})

这是一个小提琴，说明了我想要实现的目标。 http://jsfiddle.net/somkchza/

Answer 1

只需在循环中添加： words.splice（classIndex，1）; 即可删除使用的字词：

$('.word').each(function(){
    classIndex = Math.floor(Math.random() * words.length);
    $(this).text(words[classIndex]);
    words.splice(classIndex,1);
})

Answer 2

你需要的是将数组混洗，然后将每个数组分配给单词。

你现在的方式，你会随机挑出一个单词，你可能会得到两次相同的单词。你不需要那个。

如果你洗牌阵列 - 你只得到每个单词一次，但是随机抽取它来得到随机顺序。然后将每个人分配到.word点

我不是错误修正这个，或者为你编写你的随机算法，但尝试类似：

var words = ['word-1', 'word-2', 'word-3', 'word-4', 'word-5', 'word-6'];

# google how to shuffle an array and put that function somewhere
# eg https://css-tricks.com/snippets/javascript/shuffle-array/
words = Shuffle(words);

# they are already random - so now just assign each one to a place
$('.word').each(function(){
   $(this).text(words[classIndex]);
})

确保随机分配的属性不重复

2 个答案: