Jquery - 获取3个随机数组元素，保证不重叠

Question

Jquery - 获取3个随机数组元素，保证不重叠

3

我将创建一个应用程序。其中一部分需要能够在一个函数内提取三个随机数组元素，而且这三个元素不能重复。

例如：

var arr = ["1","2","3","4","5","6","7","8","9","10]
$("#button").click(function()
{
    rand = Math.floor((Math.random() * arr.length));
    $("text1").text(arr[rand]);
    rand = Math.floor((Math.random() * arr.length));
    $("text2").text(arr[rand]);
    rand = Math.floor((Math.random() * arr.length));
    $("text3").text(arr[rand]);
})

我已经重复使用随机数生成器3次，因为如果不这样做，生成的数字将保持不变。问题在于，随机数生成器可能会多次产生相同的数字。有没有办法避免这种情况发生？

如果这是一个重复的问题，我很抱歉，但它没有出现在建议的问题中。

编辑：根据要求添加了HTML标记。

<html>
    <head>
    </head>
    <body>
        <div data-role="page" id="menu">
            <div data-role="header">
                <div data-role="navbar">
                    <p><h2 align="center">App Name</h2></p>
                </div>
            </div>
            <div data-role="content">
                <div>
                    <h1 style="font-size:50px" align="center" id="name"></h1>
                </div>
                <div style="padding-top:30px">
                    <h1 align="center" id="q"></h1>
                </div>
                <div style="padding-top:50px">
                    <p align="center"><a style="font-size:22px" id="text1"></a></p>
                    <p align="center"><a style="font-size:22px" id="text2"></a></p>
                    <p align="center"><a style="font-size:22px" id="text3"></a></p>
                </div>
                <div style="padding-top:50px">
                    <h3 align="center" id="counter"></h3>
                </div>
            </div>
            <div data-role="footer" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a id="t">Restart</a></li>
                        <li><a id="qu">Quit</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html

- John

1

每次调用函数时，复制数组，并针对每个随机数从数组中删除结果并在剩余元素上执行下一个随机操作。 - Banana

有类似splice的东西吗？我在用它来处理其他数组，问题是这需要重复10次，大约有25-30个总数组元素。我希望它只是简单地使用if语句就可以了。但我会尝试一下的。谢谢。 - John

请提供项目的HTML文件，我想测试一下 ^_^！ - solimanware

这个程序中重要的HTML实际上只有3个文本框，它们的ID就是它们本身。不过我会添加进去的。 - John

2个回答

1

你可以创建数组的副本，并在随机选择元素时删除它们：

var arr = ["1","2","3","4","5","6","7","8","9","10"]; // fix end here

$("#button").click(function() {
    var arr2 = arr.slice(0); // clone array
    for (var i = 1; i < 4; i++) { // loop to avoid code duplication
        rand = Math.floor((Math.random() * arr2.length));
        $("text" + i).text(arr2[rand]);
        arr2.splice(rand, 1); // remove selected element
    };
});

- trincot

@John，我个人认为就性能而言，这个答案更好。另一个答案中的方法仅检查随机选择的值是否已存在于临时数组中，如果需要检索的随机元素数量接近原始数组中的元素数量，那么该函数可能会运行数百次迭代。而这个答案确保只有所需元素数量的循环。 - Banana

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Anik Islam Abhi · Accepted Answer

你可以创建一个随机值的数组

像这样：

var temp=[];

while(temp.length<3){
  rand = Math.floor((Math.random() * arr.length));
  if(temp.indexOf(arr[rand])<0){
    temp.push(arr[rand])
  }
}

然后将随机值添加到您的视图中。

$("text1").text(temp[0]);
$("text2").text(temp[1]);
$("text3").text(temp[2]);

演示

你的数组末尾缺少引号（可能是笔误）。

var arr = ["1","2","3","4","5","6","7","8","9","10]
                                                 ^
                                                here