使用jQuery隨機加載div

我正在爲獲得什麼似乎是一個合理簡單的腳本功能而努力，我希望在瀏覽器刷新時隨機使用七個Div。使用jQuery隨機加載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; 
}

沒有加載在所有的，目前。

我還是這個品牌的新手，所以如果這是最基本的，我將不得不原諒自己。

來源

2013-03-04 spl

請將您的代碼包裝在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-04 10:20:13

將函數環繞在$(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-04 10:20:51

試試這個，

$(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-04 10:21:16

首先，你來包裝你的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-04 10:21:18 moonwave99

偉大的東西人，謝謝你的所有信息！我相信這是在圖像之前加載的腳本。 – spl 2013-03-04 11:24:58

非常簡單。試試這個

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

來源

2013-03-04 10:29:27

使用jQuery隨機加載div

回答

相關問題