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

如何在RANDOM中添加Class（）到jQuery中的元素？

1 个答案: