JavaScript只显示部分元素，随机生成

我正在尝试制作HTML游戏，这部分是一组答案。我不希望在一次会议上显示整个集合，我希望它是随机选择的（从30只显示6）

巴黎香榭丽舍大街

伦敦泰特现代美术馆

萨格拉达家族

蒙马特

第五大道

海鲜饭

La Rambla

皮卡迪利广场

蒙娜丽莎

帝国大厦

百老汇

巴黎奥赛博物馆

华尔街

卡姆登镇

大苹果

La Boqueria

---

我的问题是：如何通过随机生成来隐藏这些元素并仅显示其中的一部分？

您可以通过获取所有

li

节点并调整

hidden

属性来循环列表并随机隐藏它们：

document.queryselectoral（#answers li）
.forEach（答案=>
answer.hidden=Boolean（Math.random（）<0.5）
);

巴黎香榭丽舍大街

伦敦泰特现代美术馆

萨格拉达家族

蒙马特

第五大道

海鲜饭

La Rambla

皮卡迪利广场

蒙娜丽莎

帝国大厦

百老汇

巴黎奥赛博物馆

华尔街

卡姆登镇

大苹果

La Boqueria

通过获取所有
li
节点并调整
hidden
属性，您可以在列表中循环并随机隐藏它们：


document.queryselectoral（#answers li）
.forEach（答案=>
answer.hidden=Boolean（Math.random（）<0.5）
);

巴黎香榭丽舍大街

伦敦泰特现代美术馆

萨格拉达家族

蒙马特

第五大道

海鲜饭

La Rambla

皮卡迪利广场

蒙娜丽莎

帝国大厦

百老汇

巴黎奥赛博物馆

华尔街

卡姆登镇

大苹果

La Boqueria

您可以尝试创建一个包含所有元素的索引的数组，然后对数组进行排序并只对所需的部分进行切片。最后，根据索引循环所有元素以显示/隐藏

您可以尝试以下方法：


函数RandomDiv（）{
var-elements=document.querySelectorAll（'#answers li'）；
var indArr=新数组（elements.length）.fill（）.map（（（uu，i）=>i）；
//洗牌阵列
var shuffled=indArr.sort（函数（）{return.5-Math.random（）}）；
//洗牌后获得前5个元素的子数组
var selected=shuffled.slice（0,5）；
元素。forEach（（el，i）=>{
如果（选定，包括（i））
el.style.display='block'；
else el.style.display='none'；
});
}
RandomDiv（）

巴黎香榭丽舍大街

伦敦泰特现代美术馆

萨格拉达家族

蒙马特

第五大道

海鲜饭

La Rambla

皮卡迪利广场

蒙娜丽莎

帝国大厦

百老汇

巴黎奥赛博物馆

华尔街

卡姆登镇

大苹果

La Boqueria

接下来
您可以尝试创建所有元素的索引数组，然后对数组进行排序，并仅对所需的部分进行切片。最后，根据索引循环所有元素以显示/隐藏

您可以尝试以下方法：


函数RandomDiv（）{
var-elements=document.querySelectorAll（'#answers li'）；
var indArr=新数组（elements.length）.fill（）.map（（（uu，i）=>i）；
//洗牌阵列
var shuffled=indArr.sort（函数（）{return.5-Math.random（）}）；
//洗牌后获得前5个元素的子数组
var selected=shuffled.slice（0,5）；
元素。forEach（（el，i）=>{
如果（选定，包括（i））
el.style.display='block'；
else el.style.display='none'；
});
}
RandomDiv（）

巴黎香榭丽舍大街

伦敦泰特现代美术馆

萨格拉达家族

<div id = "answers">
        <li class = "paris"><p> Champ Elysees </p></li>
        <li class = "london"><p> Tate Modern </p></li>
        <li class = "barcelona"><p> Sagrada Familia </p></li>
        <li class = "paris"><p> Montmartre </p></li>
        <li class = "ny"><p> Fifth Avenue </p></li>
        <li class = "barcelona"><p> Paella </p></li>
        <li class = "barcelona"><p> La Rambla </p></li>
        <li class = "london"><p> Piccadilly Circus </p></li>
        <li class = "paris"><p> Mona Lisa </p></li>
        <li class = "ny"><p> Empire State Building </p></li>
        <li class = "ny"><p> Broadway </p></li>
        <li class = "paris"><p> Musée d'Orsay </p></li>
        <li class = "ny"><p> Wall Street </p></li>
        <li class = "london"><p> Camden Town </p></li>
        <li class = "ny"><p> Big Apple </p></li>
        <li class = "barcelona"><p> La Boqueria </p></li>
    </div>