Question

假设我有一些类：

<div class="something" style="display: none">Some text I would like to show</div>
<div class="something" style="display: none">Some text2 I would like to show</div>
<div class="something" style="display: none">Some text3 I would like to show</div>
<div class="something" style="display: none">Some text4 I would like to show</div>
<div class="something" style="display: none">Some text5 I would like to show</div>

我想每隔几秒就显示一次随机课程。我想伪代码会是这样的：

    setInterval(function() {
        $('.something').hide();
        var rand_number = random(1, ('.something').length);
        $('.something').array[rand_number].show();
    }, 5000);

感谢。

Answer 1

尽量避免经常评估$('.something')：

setInterval(function() {
    var $s = $('.something');
    var r = Math.floor(Math.random() * $s.length);
    $s.hide().eq(r).show();
}, 5000);

如果您知道加载文档后元素列表不会更改，您可以进一步简化：

$(function() { // short-hand for document.ready
    var $s = $('.something');
    var count = $s.length;
    setInterval(function() {
        var r = Math.floor(Math.random() * count);
        $s.hide().eq(r).show();
    }, 5000);
});

Answer 2

setInterval(function() {
        $('.something').hide();
        var classes = $('.something');
        var rand_number = Math.round(Math.random() * (classes.length));
        $(classes[rand_number]).show();
    }, 5000);

Answer 3

setInterval(function() {
    var $something = $('.something').hide();
    var rand_number = Math.floor(Math.random() * $something.length);
    $something.eq(rand_number).show();
}, 1000);

<强> Example on jsfiddle

Answer 4

setInterval(function() {
    $('.something').hide();
    var rand_number = random(0, ('.something').length - 1);
    $('.something:eq('+rand_number+')').show();
}, 5000);

Answer 5

你的例子看起来很稳固，但是，我有一些建议： 1.你的班级。某些东西应该在样式表中显示：none而不是内联;另外（最初）你不必以编程方式隐藏。没有意义重复这一点。

这也可以使用存储在数组中的ID来实现，因此您不必每次都查询DOM来获取元素。你可以将它与$（“。something”）结合使用.hide（）;如果您不想存储以前显示的项目。如果动态生成div，这可能不实用。
您可以使用一个元素并更新其内容;当然，使用您的示例中未暗示的不同元素可能存在美学原因。
您可以使用一个元素并更新其内容;当然，使用您的示例中未暗示的不同元素可能存在美学原因。

显示随机类

5 个答案: