使用 jQuery 随机加载 div
Posted
技术标签:
【中文标题】使用 jQuery 随机加载 div【英文标题】：Loading Divs randomly with jQuery 【发布时间】：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;
目前根本没有加载任何内容。
我还是个新手，所以如果这是初级的，我将不得不原谅自己。
【问题讨论】：
【参考方案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();
);
【讨论】：
以上是关于使用 jQuery 随机加载 div的主要内容，如果未能解决你的问题，请参考以下文章