JavaScript/jQuery - 如何在頁面加載時隨機顯示html div內容

這是我第一次遇到這個問題，所以請耐心等待（對編程來說也是新的），我會盡我所能解釋清楚。基本上我希望每次頁面加載時都以隨機順序顯示div內容，這個問題以前已經提出過，我也遇到過一些答案，但其中大部分對我來說都很複雜。但我發現了一個非常簡單的答案（Random Div Order on Page Load），我試過了，但我不確定爲什麼它不適用於我，可能有點過時了。我粘貼下面的代碼，以可視化你很多，這裏有HTML內容需要進行隨機的div：JavaScript/jQuery - 如何在頁面加載時隨機顯示html div內容

<div class="story-container"> 
    <div class="story"> 
    <a href="#"><img src="#" alt="some text"></a> 
     <h4>Story Title</h4> 
    </div> 
    <div class="story"> 
    <a href="#"><img src="#" alt="some text"></a> 
     <h4>Story Title</h4> 
    </div> 
</div> 
<div class="story-container"> 
<div class="story"> 
    <a href="#"><img src="#" alt="some text"></a> 
    <h4>Story Title</h4> 
</div> 
<div class="story"> 
    <a href="#"><img src="#" alt="some text"></a> 
    <h4>Story Title</h4> 
</div>

我可以添加更多的故事容器「類的div中未來。

下面是我從我上面提供的鏈接中給出的後拿到劇本（我更換了目標類與我自己的類「故事」）：

<script> 
var cards = $(".story"); 
for (var i = 0; i < cards.length; i++) { 
var target1 = math.floor(math.random() * cards.lenth - 1) + 1; 
var target2 = math.floor(math.random() * cards.lenth - 1) + 1; 
cards.eq(target1).before(cards.eq(target2)); 
} 
</script>

我已經使用此代碼嘗試的JavaScript代碼在同一個html頁面中，在標題以及正文部分的末尾。我也嘗試從外部保存它，並從我的html頁面鏈接到它，但沒有運氣。

我的jQuery的鏈接/版本如下：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3 
/jquery.min.js"></script>

我運行js腳本，以隨機化的div之前導入此jQuery代碼。不知道哪裏出了問題，任何幫助將不勝感激，非常感謝提前傢伙！

[進展]

非常感謝你們的及時答覆和詳細的指導，@Hill @fermats_last_nerve @jritchey @Quiver，雖然你固定的代碼，但它仍然沒有在我的瀏覽器的工作這是真的奇怪，因爲它可以在jsfiddle，codepen和plunkr中完美工作。如果它在使用在線工具，它也應該在我的瀏覽器中工作。

我使用WAMP作爲服務器在Windows 10上測試我的php頁面，我通常使用Firefox瀏覽器，但是我已經在Microsoft Edge上測試了這個代碼，但沒有喜悅。再次感謝您花時間幫助我。

來源

2016-03-07 Ros

在FireFox中使用Firebug擴展來查看JavaScript是否有任何錯誤。這裏有一些關於Firebug的更多信息：http://getfirebug.com/whatisfirebug – Quiver

它現在可以運行了！感謝你們！！！我附上了這個代碼： $（document）.ready（function（）{ // code here }）; 並將其放在頁面正文部分的底部。非常感謝您的幫助！沒有你的支持是無法完成的。 – Ros

好聽！你應該總是把你的jQuery放在'document.ready'中。這可以確保您的頁面完全在jquery/javascript影響它之前加載完成。這也可以讓你把javascript/jquery放在頁面的任何位置，因爲無論如何它都會在最後加載。你可以在這裏瞭解更多：https：//learn.jquery.com/using-jquery-core/document-ready/ – Quiver

我在this codepen中調試了您的代碼。基本上，你有3個錯誤

有你的目標1和TARGET2定義錯別字 cards.lenth應該cards.length
變量卡：var cards = $(".article")是選擇與類「文章」的所有元素，但你不知道有任何與該類的元素，我假定你的意思是var cards = $(".story")
請確保你使用它時大寫Math。（編輯）看起來像有人編輯你的帖子，讓選擇正確的類，所以＃2不再有意義的新編輯的問題，但我會離開它，以防您不注意到編輯無論原因。

來源

2016-03-07 22:10:50

謝謝@fermats_last_nerve它現在正在工作！ – Ros

我注意到你的代碼中有一些拼寫錯誤。用下面的代碼替換你的jQuery，它應該像在jsfiddle中那樣工作。

var cards = $(".story"); 
for (var i = 0; i < cards.length; i++) { 
    var target1 = Math.floor(Math.random() * cards.length - 1) + 1; 
    var target2 = Math.floor(Math.random() * cards.length - 1) + 1; 
    cards.eq(target1).before(cards.eq(target2)); 
}

來源

2016-03-07 22:11:41 jritchey

謝謝@jritchey它現在正在工作！ – Ros

@Ros很高興聽到！ – jritchey

JavaScript/jQuery - 如何在頁面加載時隨機顯示html div內容

回答

相關問題