Question

我正在努力争取看起来像一个合理的简单脚本功能，我想在浏览器刷新时随机使用7个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;
}

目前没有任何东西可以加载。

我对此仍然是全新的，所以如果这是基本的话，我将不得不原谅自己。

Answer 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();
});

Answer 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/

Answer 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();
});

Answer 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满载时执行。

Answer 5

非常简单。试试这个

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

使用jQuery随机加载Div

5 个答案: