Question

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

但是现在我试图让它在页面加载时显示一个随机的div。

我尝试添加这个：

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

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

Answer 1

这是代码和demo：

<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（）调用。

在页面加载时显示随机div

2 个答案: