javascript - 显示数组项一次(点击)

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>