如何在jQuery中将addClass()随机应用于一个元素？

Question

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>元素中？

换句话说，每次加载页面时都应该有一个p标签可见，并且应该随机选择这个p标签。

- Jonas

---

请注意，它是 display: none，而不是 display: hidden。 - BoltClock

Answer 1

试试这个：

$(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; }

- BoltClock