このスレッドで見つけたランダムなdivに関するコードを使用して、ページの読み込み時にランダムに表示される3つのFacebookのようなボタンのセットを作成しました。
問題は、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&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21&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&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21&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&send=false&layout=button_count&width=80&show_faces=false&action=like&colorscheme=light&font&height=21&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;を削除すると、3つのdivすべてが表示されます...
助けていただければ幸いです。しばらくの間、机に頭をぶつけてきました:-)