javascript - 显示随机 p 标签

Question

我正在尝试恢复我使用 jQuery 所做的一些工作。我想用普通的 JS 来代替。我已经注释掉了正在运行的 jQuery，以便更好地理解我想要实现的目标。

var quotes = document.getElementsByClassName("quotes");

 document.getElementById("generate").addEventListener("click", function (event) {
  var random = Math.floor(Math.random() * quotes.length);
  quotes.style.visibility = "hidden";
  quotes[random].style.visibility = "visible";
  //$('.quotes').hide().eq(random).show();
});

我希望在运行代码时显示随机段落标签。任何帮助将不胜感激。

Answer 1

quotes 是 array-like对象，因此没有 style 属性。

您可以改为循环遍历数组中的每个元素并更改其visibility 属性。

此外，您可以在循环中使用三元运算符将第 1 项设置为可见。

for(var i = 0; i < quotes.length; i++){
   quotes[i].style.visibility = (i==random) ? "visible" : "hidden";
}

严格来说，如果您希望将 jQuery 实现复制到 VanillaJS 中，那么您应该更改的是 display 属性，而不是 visibility。

for(var i = 0; i < quotes.length; i++){
   quotes[i].style.display = (i==random) ? "block" : "none";
}

此处的工作示例:https://jsfiddle.net/1cog9t3c/1/

<小时/>

var quotes = document.getElementsByClassName("quotes");

 document.getElementById("generate").addEventListener("click", function (event) {
  var random = Math.floor(Math.random() * quotes.length);
  for(var i = 0; i < quotes.length; i++){
      quotes[i].style.display = (i==random) ? "block" : "none";
   }
});

<div class="quotes">
test
</div>
<div class="quotes">
test 2
</div>
<div class="quotes">
test 3
</div>

<button id="generate">
gen
</button>