如何选择一组使用jQuery.inArray方法独特的随机数（无重复）的？ [英] How to choose a set of unique random numbers (no duplicates) using the jQuery.inArray method?
问题描述
这是一个Javascript / jQuery的问题：
This is a Javascript / jQuery question:
我想生成1到21之间六个独特的随机数（无重复），使用 jQuery.inArray 方式。然后，这些六个数字将被用于通过logo21.jpg选择从命名组logo1.jpg 6 .jpg文件。
I'm trying to generate six unique random numbers between 1 and 21 (no duplicates), using the jQuery.inArray method. Those six numbers will then be used to select six .jpg files from a group named logo1.jpg through logo21.jpg.
谁能告诉我我在做什么错在这里？
Can anyone tell me what I'm doing wrong here?
<div id="client-logos"></div>
<script src="http://code.jquery.com/jquery-1.5.js"></script>
<script type="text/javascript">
Show = 6; // Number of logos to show
TotalLogos = 21; // Total number of logos to choose from
FirstPart = '<img src="/wp-content/client-logos/logo';
LastPart = '.jpg" height="60" width="120" />';
r = new Array(Show); // Random number array
var t=0;
for (t=0;t<Show;t++)
{
while ( jQuery.inArray(x,r)
{
var x = Math.ceil(Math.random() * TotalLogos);
});
r[t] = x;
var content = document.getElementById('client-logos').innerHTML;
document.getElementById('client-logos').innerHTML = content + FirstPart + r[t] + LastPart;
}
</script>
在此先感谢...
Thanks in advance...
推荐答案
你有几个问题有：
-
在全局窗口范围变量
variables in the global window scope
与新关键字来代替声明数组文字
an array declared with the new keyword instead of a literal
试图宣布他们之前使用变量
trying to use variables before declaring them
jQuery.inArray被错误地使用（ inArray返回一个数字，而不是真正或假）
jQuery.inArray being incorrectly used (inArray returns a number, not true or false)
低效code以，而循环理论上可能导致一个无限循环
inefficient code with a while loop which theoretically could lead to an infinite loop
现在，第二个与第三个结合是主要的问题在这里，因为你第一次测试 X 数组它是在未定义（你只定义它的如果与 VAR 语句里面，所以在x起初不确定的），因此它的数组中的第一个元素匹配（即未定义为你申报研究与新阵列（6））和inArray函数返回1，这导致了一个无限循环。
now, the second combined with the third is the main issue here, as the first time you test for x in the array it is undefined (you are only defining it inside the if with a var statement, so the x is at first undefined) and thus it matches the first element in the array (which is undefined as you declared r with new Array(6)) and the inArray function returns 1, which leads to an infinite loop.
有几件事情你可以做修补了code，但我想用不同的方法完全重写可能会更好，不需要jQuery的都没有。
There are several things you could do to patch that code, but I think a complete rewrite with a different approach might be better and requires no jQuery at all.
您code的这一修改后的版本应该很好地工作：
This modified version of your code should work fine:
var Show = 6, // Number of logos to show
TotalLogos = 21, // Total number of logos to choose from
FirstPart = '<img src="/wp-content/client-logos/logo',
LastPart = '.jpg" height="60" width="120" />',
array = [], // array with all avaiilable numbers
rnd, value, i,
logosElement = document.getElementById('client-logos');
for (i = 0; i < TotalLogos; i++) { // arrays are zero based, for 21 elements you want to go from index 0 to 20.
array[i] = i + 1;
}
for (i = 0; i < Show; i++) { // pick numbers
rnd = Math.floor(Math.random() * array.length);
value = array.splice(rnd,1)[0]; // remove the selected number from the array and get it in another variable
logosElement.innerHTML += (FirstPart + value + LastPart);
}
结果
要稍微解释一下我在这里所做的：
To explain a little what I did here:
-
初始化所有你（数字1到21）的可能值的数组
initialize an array with all the possible values you have (numbers 1 to 21)
运行一个循环只有多次号码，你想选择。
run a loop only as many times as numbers you want to pick.
生成从0到您的数字阵列可用的最大指数随机数
generate a random number from 0 to the maximum index available in your numbers array
使用剪接删除该数组索引处的数字，然后用它来创建的innerHTML调用字符串（的拼接返回该数组作为另一个新的数组）删除的元素。
remove the number at that index from the array using splice, and then use it to create the string for the innerHTML call (splice returns the elements removed from the array as another new array).
此外，在 logosElement 变量开头缓存，因此你只做为元素的单一DOM查找。
additionally, the logosElement variable is cached at the beginning so you only do a single DOM lookup for the element.
有更多的code可以被改写，甚至清理的方式，但我想这将是帮助您解决问题最彻底的方法（和它的跨浏览器的安全！无需添加jQuery的，除非你需要它的另一个功能）
There are more ways that code can be rewritten and even cleaned up, but I figured this would be the cleanest way to help you with your issue (and it's cross-browser safe! no need to add jQuery unless you need it for another functionality)
这篇关于如何选择一组使用jQuery.inArray方法独特的随机数（无重复）的？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
