javascript - 在页面加载时显示随机 div

Question

我一直在努力在点击链接时显示/隐藏一些 div：

我的小提琴

但是现在我正在尝试获取它，以便在加载页面时显示其中一个随机的 div。

我试着添加这个：

var $reviews = $(.hider ').hide();
$reviews.eq(Math.random()*$reviews.length).show();​

但是，它似乎打破了我之前所做的工作。有什么建议么？

Answer 1

这是代码和演示：

<div id="brother-gallery" class="hider">Brother Content</div>
<div id="mitsu-gallery" class="hidden hider">Mitsu Content</div>
<div id="taki-gallery" class="hidden hider">Taki Content</div>

<br /><br />
<div id="brother-tag" class="hider">Brother Tagline</div>
<div id="mitsu-tag" class="hidden hider">Mitsu Tagline</div>
<div id="taki-tag" class="hidden hider">Taki Tagline</div>

<br /><br />
<p><a href="#" class="control" data-field="brother">Brother Link</a></p>
<p><a href="#" class="control" data-field="mitsu">Mitsu Link</a></p>
<p><a href="#" class="control" data-field="taki">Taki Link</a></p>
<p><a href="#" class="random">Random</a></p>

​

$('.control').on('click', function(e) {
    e.preventDefault();
    var field = $(this).data('field');
    $('.hider:visible').fadeOut("slow", function() {
        $('#' + field + '-gallery, #' + field + '-tag').fadeIn("slow");
    });
});

$('.random').on('click',function(e){
    var randomIndex = Math.floor((Math.random()*100)+1)%3;
    console.log(randomIndex);
    var field = $($('a').get(randomIndex)).data('field');
    $('.hider:visible').fadeOut("slow", function() {
        $('#' + field + '-gallery, #' + field + '-tag').fadeIn("slow");
    });
});​

Answer 2

尝试：

var reviews = $('.hider');
reviews.hide();
var index = Math.floor(Math.random * reviews.length);
reviews.eq(index).show();

您需要确保将整数值传递给 eq() 调用。