javascriptまたはphpの無秩序な投稿

Question

私は異なる画像とリンクで30のdivを持っていて、それらを10の異なるdivにランダムに表示させたいと思っていました。

例：http://imgur.com/Ar1gdzL（それはアニメーションGIFです）、私たちはWordPressで使う「ランダム関連記事」などの

何かが、私のページはWordPressではありません。それはPHPの単純なウェブサイトです。

divがjavascriptやPHPでこれを行う方法など など などとても リンク リンク リンク

でしょうか？

Answer 1

10（またはそれ以上）の文字列の配列を作成し、それらの位置にhere

を述べたように、配列をシャッフルdiv要素を

を充填するHTMLコンテンツを

を（空のdiv）を10のdiv要素を作成します配列を渡し、10個のdivのinnerHtmlを1つずつ変更します（10 div以降の最初の10要素のみ）

Answer 2

必要に応じて、さまざまな方法を使用できます。 MySQLを使用する場合、次のようなクエリを使用できます。

SELECT images, link FROM tablename WHERE ...... ORDER BY RAND() 

また、配列にシャッフルを使用することもできます。

$array = array ('image1', 'image2'); 
shuffle ($array); 

// Display divs 

Answer 3

<div class="divPool">content 1</div> 
<div class="divPool">content 2</div> 
<div class="divPool">content 3</div> 

等... 30へのdiv

<div class="destination">destination 1</div> 
<div class="destination">destination 2</div> 
<div class="destination">destination 3</div> 

など10にdivを、JavaScriptで、その後

：CSSでも

//make arrays of the html elements in each class: 
    var arrayOfContent=document.getElementsByClassName("divPool"); 
    var arrayOfDestinations=document.getElementsByClassName("destination"); 

    for (var i=0; i<10: i++){//for each of the 10 destination divs 

    //select a random number from 0 to 29 
    var random=Math.floor(Math.random() * 30); 

    arrayOfDestinations[i].innerHTML=arrayOfContent[random].innerHTML 
    } 

、あなたdivPoolクラスを次のように非表示にすることができます：

.divPool{display:none} 

Answer 4

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
$(document).ready(function(){ 
 
\t for(i=1;i<=10;i++){ 
 
\t \t var id = Math.floor(Math.random() * 30) + 1; 
 
\t \t $("#display_"+id).show(); 
 
\t }  
 
}); 
 
</script> 
 
<div id="display_1" style="display:none;">1</div> 
 
<div id="display_2" style="display:none;">2</div> 
 
<div id="display_3" style="display:none;">3</div> 
 
<div id="display_4" style="display:none;">4</div> 
 
<div id="display_5" style="display:none;">5</div> 
 
<div id="display_6" style="display:none;">6</div> 
 
<div id="display_7" style="display:none;">7</div> 
 
<div id="display_8" style="display:none;">8</div> 
 
<div id="display_9" style="display:none;">9</div> 
 
<div id="display_10" style="display:none;">10</div> 
 
<div id="display_11" style="display:none;">11</div> 
 
<div id="display_12" style="display:none;">12</div> 
 
<div id="display_13" style="display:none;">13</div> 
 
<div id="display_14" style="display:none;">14</div> 
 
<div id="display_15" style="display:none;">15</div> 
 
<div id="display_16" style="display:none;">16</div> 
 
<div id="display_17" style="display:none;">17</div> 
 
<div id="display_18" style="display:none;">18</div> 
 
<div id="display_19" style="display:none;">19</div> 
 
<div id="display_20" style="display:none;">20</div> 
 
<div id="display_21" style="display:none;">21</div> 
 
<div id="display_22" style="display:none;">22</div> 
 
<div id="display_23" style="display:none;">23</div> 
 
<div id="display_24" style="display:none;">24</div> 
 
<div id="display_25" style="display:none;">25</div> 
 
<div id="display_26" style="display:none;">26</div> 
 
<div id="display_27" style="display:none;">27</div> 
 
<div id="display_28" style="display:none;">28</div> 
 
<div id="display_29" style="display:none;">29</div> 
 
<div id="display_30" style="display:none;">30</div>

`