jquery在頁面加載顯示div並隱藏另一個

Question

我試圖做出這樣的效果：每次打開網站的頁面時出現一個div，而另一個div消失，並且它們總是交替出現。 div1，div2，div1，div2 ....我設法通過隨機做到這一點，如下面的代碼，但我想切換每個頁面加載，刷新的順序。有人可以幫助我嗎？

jQuery("document").ready(function($){ 
var numRand = Math.floor(Math.random() * 2); 
switch (numRand) { 
    case 0: 
    $(".div1").remove(); 
     break; 

    case 1: 
    $(".div2").remove(); 
     break; 
} 
}); 

Answer 1

你將不得不存儲上次選擇的地方。 Cookie可能是最簡單的方法。

代碼並不因爲跨域的問題，以便運行，但這裏有一個工作jsFiddle

$(function() { 
 
\t var numRand = GetCookieValue("numRand") || 0; 
 
\t switch (numRand % 2) { 
 
\t \t case 0: 
 
\t \t \t $(".div1").remove(); 
 
\t \t \t break; 
 
\t \t case 1: 
 
\t \t \t $(".div2").remove(); 
 
\t \t \t break; 
 
\t } 
 
\t SetCookieValue("numRand", ++numRand); 
 
}); 
 

 
function GetCookieValue(key) { 
 
\t var value = null; 
 
\t var cookieArray = document.cookie.split(';'); 
 
\t for (var i = 0; i < cookieArray.length; i++) { 
 
\t \t var keyValuePair = cookieArray[i].split("="); 
 
\t \t if (keyValuePair[0] == key) { 
 
\t \t \t value = keyValuePair[1]; 
 
\t \t \t break; 
 
\t \t } 
 
\t } 
 
\t return value; 
 
} 
 

 
function SetCookieValue(key, value) { 
 
\t document.cookie = key + "=" + value; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="div1"> 
 
    This is div1 
 
</div> 
 
<div class="div2"> 
 
    This is div2 
 
</div>