3

我正在努力获得一个看似合理的简单脚本功能，我想在浏览器刷新时随机化七个 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;
}

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

我对此还是很陌生，所以如果这是基本的，我将不得不原谅自己。

4

5 回答 5

3

请将您的代码包装在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();
});
于 2013-03-04T10:20:13.840 回答
3

用$(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/

于 2013-03-04T10:20:51.677 回答
2

尝试这个，

$(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();
});
于 2013-03-04T10:21:16.560 回答
1

首先，你必须将你的 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 完全加载时执行。

于 2013-03-04T10:21:18.167 回答
1

很简单。尝试这个

$(function(){
  var ind = Math.floor((Math.random()*7)+1);
  $("div.Image:eq("+ind+")").show();
});
于 2013-03-04T10:29:27.943 回答