显示数组项目一次（点击）

Question

这就是我想要做的..

1. 单击按钮时会显示随机数组项。
2. 数组项只能显示一次。

目前我已将代码设置为：

1. 点击时会显示随机数组项。
2. 按钮单击继续循环，没有结束。
3. 按钮单击会多次显示该项目。

这里是代码http://codepen.io/fun/pen/aNedGQ?editors=1010的链接

我们将不胜感激！ =)

下面是代码，和上面的链接一样。

HTML

<div id ='display'> </div>
<div class ='button'>Next item</div>

JS

var items = [1, 2, 3, 4, 5, 6, 7, 8, 9];

// Randomly on click display each item
// Only display each item once
// Stop when all items have been displayed

// Display to screen
var display = function(info) {
  var x = document.getElementById('display');
  x.innerHTML = info;
}
// Create random number
var random = Math.floor(Math.random() * items.length);
// Click handler 
$('.button').on('click', function() {
// Display random arr items to screen
  display(items[random]);
// Next item to be random
  random = (random + Math.floor(Math.random() * items.length)) % items.length;
});

Answer 1

您可以显示随机项目，然后将其从数组中删除

var items = [1, 2, 3, 4, 5, 6, 7, 8, 9];
$('.button').click(function() {
  var rand = items[Math.floor(Math.random() * items.length)];
  $('#display').text(rand);
  items.splice(items.indexOf(rand), 1);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='button'>Next item</div>
<div id='display'></div>