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/

＆＃13;

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

＆＃13;

<div class="quotes">
test
</div>
<div class="quotes">
test 2
</div>
<div class="quotes">
test 3
</div>

<button id="generate">
gen
</button>

＆＃13;

Answer 2

替换

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

带

var quotes=document.getelemetsByid("quotes").innerhtml;

Answer 3

您的quotes是HTMLCollection，因此您需要循环播放它。

您可以使用Array.prototype.forEach.call在数组的每个元素上调用函数：

＆＃13;

var quotes = document.getElementsByClassName("quotes");

document.getElementById("generate").addEventListener("click", function(event) {
    var random = Math.floor(Math.random() * quotes.length);

    Array.prototype.forEach.call(quotes, function(quote) {
        quote.style.visibility = "hidden";
    });
    
    quotes[random].style.visibility = "visible";
});

＆＃13;

<div class="quotes">quote1</div>
<div class="quotes">quote2</div>
<div class="quotes">quote3</div>
<div class="quotes">quote4</div>

<div id="generate">
    Generate
</div>

＆＃13;

随机p标签显示

3 个答案: