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

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>文档准备好时随机添加一个元素？

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

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