Question

我使用了this thread about random divs上找到的一些代码来创建一组3个Facebook赞按钮，这些按钮应该在页面加载时随机显示。

问题是，works fine in jFiddle但是每当我投入生产时都会完全失败。

我从Nick Craver那里借了这个代码并进行了一些非常基本的修改，基本上只是将类名从'Image'更改为'facebookLike'：

HTML：

<div class="facebookLike">
    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fcsuvolleyball&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=150920871613500" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
</div>
<div class="facebookLike">
    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2Fcsurams&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=150920871613500" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
</div>
<div class="facebookLike">
    <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FCoachJimMcElwain&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21&amp;appId=150920871613500" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe>
</div>

jQuery代码：

var divs = $("div.facebookLike").get().sort(function() {
    return Math.round(Math.random()) - 0.5; //random so we get the right +/- combo
}).slice(0, 1)
$(divs).appendTo(divs[0].parentNode).show();

以下是该页面的链接：http://www.csurams.com/test/facebook.html如您所见，没有任何事情发生。

我无法判断问题是否与display：none;风格规则或其他。但是，当我删除display：none;所有三个div都显示......

非常感谢任何帮助，现在我已经在我的桌子上敲了一会儿： - ）

Answer 1

由于只有3个元素，因此对它进行排序不会做太多。尝试做这样的事情：

var rand = $(".facebookLike").length-1 //need to -1 because :eq is zero indexed
$(".facebookLike:eq("+rand+")").show()

Answer 2

首先，你不应该使用jQuery 1.3，现在是1.8.2？

其次，你没有包装你的代码：

<script type="text/javascript">
    $(function() {
        var divs = $("div.Image").get().sort(function(){ 
            return Math.round(Math.random())-0.5;
        }).slice(0,1);
        $(divs).appendTo(divs[0].parentNode).show();â€‹
    });
</script>

另外请注意最后的奇怪字符，你必须删除它们在你的代码中的那些，当你从jsFiddle复制东西时，它们有时也会这样，我会将字符保留在那里你看到了他们。

随着<jQuery无法正常工作</div>显示加载时随机<div>

2 个答案: