这是一个 Javascript/jQuery 问题:
我正在尝试使用 jQuery.inArray 方法生成 1 到 21 之间的六个唯一随机数(无重复)。然后,这六个数字将用于从名为 logo1.jpg 到 logo21.jpg 的组中选择六个 .jpg 文件。
谁能告诉我我做错了什么?
<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>
提前致谢...
最佳答案
你有几个问题:
全局窗口范围内的变量
用
new
关键字而不是文字声明的数组尝试在声明变量之前使用它们
jQuery.inArray 被错误使用(inArray returns a number,不是
true
或false
)带有
while
循环的低效代码,理论上可能会导致无限循环
现在,第二个与第三个结合是这里的主要问题,因为您第一次在数组中测试 x
它是 undefined
(您只是定义它在带有 var
语句的 if
中,所以 x 最初是未定义的)因此它匹配数组中的第一个元素(undefined
,因为您使用 new Array(6)
) 声明了 r
,并且 inArray 函数返回 1,这会导致无限循环。
您可以通过多种方式来修补该代码,但我认为使用不同的方法完全重写可能会更好,而且根本不需要 jQuery。
您的代码的这个修改版本应该可以正常工作:
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);
}
稍微解释一下我在这里做了什么:
用您拥有的所有可能值(数字 1 到 21)初始化一个数组
循环次数与您要选择的数字一样多。
生成一个从 0 到数字数组中可用的最大索引的随机数
使用拼接从数组中删除该索引处的数字,然后使用它为 innerHTML 调用创建字符串 (splice returns the elements removed from the array as another new array)。
此外,
logosElement
变量在开始时缓存,因此您只需对该元素执行一次 DOM 查找。
有更多的方法可以重写甚至清理代码,但我认为这是帮助您解决问题的最干净的方法(而且它是跨浏览器安全的!无需添加 jQuery,除非您需要它另一个功能)
关于javascript - 如何使用 jQuery.inArray 方法选择一组唯一的随机数(无重复)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5143401/