jquery - 如何将RANDOM的addClass()添加到jQuery中的元素？

HTML/CSS：

<style>
div.myWords p { display: hidden; }
p.show { display: block; }
</style>

<div class="myWords">

<p>Hello</p>
<p>Hola</p>
<p>Bonjour</p>

</div><!-- myWords -->

如何在文档就绪时一次将类“show”随机添加到单个<p>元素？
换句话说，每次加载页面时，应该可以看到1个p标记，并且应该随机选择这个p标记。

最佳答案

试试这个：

$(document).ready(function() {
    var paras = $('div.myWords p');
    var rand = Math.floor(Math.random() * paras.length);
    paras.eq(rand).addClass('show');
});

如果您试图将display: none更改为display: block，则可以从css中省略show类，并仅使用jquery显示它，如下所示：

$(document).ready(function() {
    var paras = $('div.myWords p');
    var rand = Math.floor(Math.random() * paras.length);
    paras.eq(rand).show();
});

顺便说一句，你需要改变你的css以便覆盖工作。将display: hidden;更改为display: none;，并将div.myWords类添加到第二个规则中：

div.myWords p { display: none; }
div.myWords p.show { display: block; }