如何在RANDOM中添加Class()到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 -->

如何<p>在文档就绪时随机将"show"类添加到单个元素中？

换句话说,每次加载页面时都应该看到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,则可以省略showCSS中的类并仅使用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; }