Question

我无法按<li>开始随机游戏。每场比赛都应该是独一无二的。

＆＃13;

var randomGames = ['Life is Strange', 'Titanfall', 'Call of Duty', 'Tales from the Borderlands', 'Assassin\'s Creed', 'Tomb Raider', 'FIFA']

＆＃13;

<ul class="list-group"><h4>These are the games that James like the most</h4>
        <li class="james list-group-item">...</li>
        <li class="james list-group-item">...</li>
        <li class="james list-group-item">...</li>
</ul>

＆＃13;

Answer 1

您可以使用jQuery执行此类操作。

＆＃13;

var randomGames = ['Life is Strange', 'Titanfall', 'Call of Duty', 'Tales from the Borderlands', 'Assassin\'s Creed', 'Tomb Raider', 'FIFA'];

var filteredArr = [...new Set(Array.from(randomGames))]

for(var i = 0; i < filteredArr.length; i++) {
  $('.list-group').append('<li class="james list-group-item">' + filteredArr[i] + '</li>');
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>These are the games that James like the most</h4>
<ul class="list-group">
</ul>

＆＃13;

或者只是纯JS 。

＆＃13;

var randomGames = ['Life is Strange', 'Titanfall', 'Call of Duty', 'Tales from the Borderlands', 'Assassin\'s Creed', 'Tomb Raider', 'FIFA'];

var filteredArr = [...new Set(Array.from(randomGames))]

for(var i = 0; i < filteredArr.length; i++) {
  var node = document.createElement("li");  
  var textnode = document.createTextNode(filteredArr[i]); 
  node.appendChild(textnode);    
  document.getElementById("list-group").appendChild(node); 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>These are the games that James like the most</h4>
<ul id="list-group">
</ul>

＆＃13;

Answer 2

从数组中选择随机项，将其添加为当前li文本并将其从数组中删除。

var randomGames = ['Life is Strange', 'Titanfall', 'Call of Duty', 'Tales from the Borderlands', 'Assassin\'s Creed', 'Tomb Raider', 'FIFA']
var li = document.querySelectorAll('li')

for(var i = 0; i < li.length; i++) {
  var n = parseInt(Math.random(randomGames.length) * randomGames.length) 
  li[i].textContent = randomGames[n]
  randomGames.splice(n, 1)
 
}

<ul class="list-group">
  <h4>These are the games that James like the most</h4>
  <li class="james list-group-item">...</li>
  <li class="james list-group-item">...</li>
  <li class="james list-group-item">...</li>
</ul>

Answer 3

这将随机化数组并过滤掉重复数据，然后将游戏作为新的li元素添加到ul（我提供了一个ID以便于访问）：

＆＃13;

var randomGames = ['Life is Strange', 'Titanfall', 'Call of Duty', 'Tales from the Borderlands', 'Assassin\'s Creed', 'Tomb Raider', 'FIFA'];

// randomize the array:
// (shuffle function taken from http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array)

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

randomGames = shuffle(randomGames);

// remove duplicates
randomGames.filter(function (elem, index, self) {
  return elem !== "" && index == self.indexOf(elem)
});

// add the games to the list
var gameslist = document.getElementById('gameslist');
for (var i = 0; i < randomGames.length; i++) {  
  var newLi = document.createElement('li');
  newLi.className = 'james list-group-item';
  newLi.textContent = randomGames[i];
  gameslist.appendChild(newLi);
}

＆＃13;

<h4>These are the games that James like the most</h4>
<ul class="list-group" id="gameslist">
</ul>

＆＃13;

Answer 4

你能把这些游戏的标题放到一个数组中，然后返回一个

要列出的随机且唯一的数组字符串

4 个答案: