JavaScript показать только часть элементов, случайное генерирование - PullRequest
Новая
       21

JavaScript показать только часть элементов, случайное генерирование

1 голос
/ 14 февраля 2020

Я пытаюсь сделать HTML игру, в состав которой входит множество ответов. Я не хочу, чтобы весь набор отображался за один сеанс, я хочу, чтобы он выбирался случайным образом (из 30 показаны только 6). 

<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>

Мой вопрос: как я могу скрыть эти элементы и показать только часть из них случайным образом сгенерировать?

Ответы [ 3 ]

2 голосов
/ 14 февраля 2020

Вы можете l oop просмотреть список и скрыть их случайным образом, получив все узлы li и изменив свойство hidden: 

document.querySelectorAll("#answers li")
.forEach(answer => 
  answer.hidden = Boolean( Math.random() < 0.5 ) 
);
<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>
1 голос
/ 14 февраля 2020

Вы можете попробовать создать массив индексов всех элементов, затем отсортировать массив и нарезать только ту часть, которая вам нужна. Наконец, l oop через все элементы, которые нужно показать / скрыть на основе index .

. Вы можете попробовать следующий способ: 

function RandomDiv() {
  var elements = document.querySelectorAll('#answers li');
  var indArr= new Array(elements.length).fill().map((_,i)=>i);
  // Shuffle array
  var shuffled = indArr.sort(function(){return .5 - Math.random()});
  // Get sub-array of first 5 elements after shuffled
  var selected = shuffled.slice(0, 5);
  elements.forEach((el,i) => {
    if(selected.includes(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>
<button id="btnNext" onclick="RandomDiv()">Next</button>
0 голосов
/ 14 февраля 2020

Этот код позволит вам выбрать, сколько вы хотите скрыть. В этом случае мы скрываем 14 из 16 ответов случайным образом, захватывая элементы со страницы, перетасовывая их и скрывая первые 14 от перетасованных элементов: 

var answerElements = document.getElementById("answers").getElementsByTagName("li");
var shuffledAnswerElements = randoSequence(answerElements);
for (var i = 0; i < Math.min(14, shuffledAnswerElements.length); i++) {
  shuffledAnswerElements[i].value.style.display = "none";
}
<script src="https://randojs.com/1.0.0.js"></script>
<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>

В этом коде используется rando js .com для упрощения случайности (т. Е. Тасования) и облегчения чтения, поэтому если вы хотите использовать этот код, просто вставьте его в тег head вашего документа html: 

<script src="https://randojs.com/1.0.0.js"></script>
...