Question

我正在尝试从数组中提取一个值（这很容易），但...... 我有5个字：香蕉，苹果，柠檬，橙子，杏子在屏幕上显示。我需要随机选择一个值在屏幕上显示并隐藏另一个值。

例：香蕉苹果柠檬橙色 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;
}

js w / jquery

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

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

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

vanilla 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";
}

从数组中随机播放文本值并仅显示一个

1 个答案: