javascript - 随机排列数组中的文本值并仅显示一个

Question

我正在尝试从数组中提取一个值(这很简单)但是......我有 5 个单词:香蕉、苹果、柠檬、橙子、杏子，它们显示在屏幕上。我需要随机选择一个值在屏幕上显示并隐藏另一个 4。

例如:1. 香蕉2.苹果3.柠檬4. 橙色5.杏子

点击(任何地方)我需要看到:1.什么都没有2.什么都没有3.柠檬(随意)4.什么都没有5.什么都没有

Answer 1

隐藏所有水果，然后有选择地显示一个。我在这里做了一个工作示例:http://codepen.io/gunderson/pen/zxWQMV

html

<button id="changer">Change Fruit</button>
<div class="container">
    <span class="apple">Apple</span>
    <span class="banana">Banana</span>
    <span class="lemon">Lemon</span>
    <span class="orange">Orange</span>
    <span class="apricot">Apricot</span>
</div>

CSS

.container span {
    display: none;
}

带有jquery的js

$("#changer").click(changeFruit);

function changeFruit(){
  var index = (Math.random() * 5) >> 0;

  $(".container span")
    .hide()
    .eq(index).show();
}

普通js

document.querySelector("#changer").addEventListener("click", changeFruit);

function changeFruit(){
  var index = (Math.random() * 5) >> 0;
  var spans = document.querySelectorAll(".container span");
  for (var i = 0, endi=spans.length; i < endi; i++){
    spans[i].style.display = "none";
  }
  spans[index].style.display = "block";
}