使用 jQuery 随机加载 div答案

【问题标题】：Loading Divs randomly with jQuery使用 jQuery 随机加载 div
【发布时间】：2013-02-18 09:39:18
【问题描述】：

我正在努力获得看似合理的简单脚本功能，我想在浏览器刷新时随机化七个 Div。

HTML 如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Strict</title>

<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>

 <script>
    var divs = $("div.Image").get().sort(function(){ 
    return Math.round(Math.random())-0.5; //random so we get the right +/- combo
    }).slice(0,4)
    $(divs).show();
 </script>

</head>

<body>


<div class="Image"><img src="image1.jpg">1</div>
<div class="Image"><img src="image2.jpg">2</div>
<div class="Image"><img src="image3.jpg">3</div>
<div class="Image"><img src="image4.jpg">4</div>
<div class="Image"><img src="image5.jpg">5</div>
<div class="Image"><img src="image6.jpg">6</div>
<div class="Image"><img src="image7.jpg">7</div>

</body>
</html>

里面的jQuery脚本应该是：

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

CSS 仅限于：

div.Image {
display: none;
}

目前根本没有加载任何内容。

我还是个新手，所以如果这是初级的，我将不得不原谅自己。

【问题讨论】：

标签： jquery html random

【解决方案1】：

请将您的代码封装在 document.ready 中。

$(document).ready(function(){
    var divs = $("div.Image").get().sort(function()
    {
       return Math.round(Math.random())-0.5; //random so we get the right +/- combo
    }).slice(0,4);

    $(divs).show();
});

【讨论】：

【解决方案2】：

用$(document).ready 包围函数，以便在页面完全加载后加载。在您的脚本执行时，div 元素尚未加载到页面上。

$(document).ready(function(){
    var divs = $("div.Image").get().sort(function(){ 
    return Math.round(Math.random())-0.5; //random so we get the right +/- combo
    }).slice(0,4)
    $(divs).show();
});

工作示例： http://jsfiddle.net/FyzXF/

【讨论】：

【解决方案3】：

试试这个，

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

【讨论】：

【解决方案4】：

首先，你必须将你的 js 代码包装成一个$(function(){ ... }) 块：

$(function(){

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

});

这意味着您的代码在 DOM 完全加载时执行。

【讨论】：

各位好东西，感谢您提供的所有信息！我相信这是在图像之前加载脚本。

【解决方案5】：

非常简单。试试这个

$(function(){
  var ind = Math.floor((Math.random()*7)+1);
  $("div.Image:eq("+ind+")").show();
});

【讨论】：