每次頁面加載時都顯示不同的div（不是隨機的）

我需要一個腳本來在每次頁面加載時顯示不同的DIV。它不能是隨機的，因爲它有時會給出相同的DIV。每次頁面加載時都顯示不同的div（不是隨機的）

我目前正在使用此腳本隨機化它;

<script> 
var elems = $("div"); 
if (elems.length) { 
    var keep = Math.floor(Math.random() * elems.length); 
    for (var i = 0; i < elems.length; ++i) { 
    if (i !== keep) { 
     $(elems[i]).hide(); 
    } 
    } 
} 
</script>

有沒有辦法確保DIV總是不同的？

來源

2016-04-25 peter vries

上的div S上的數爲了確保你不重複最後一個div，你需要以某種方式存儲最後一個div（例如cookie，localStorage等） – j08691

保存本地存儲索引... –

感謝您的回覆！我對使用cookie或localStorage一無所知 - 是否可以創建一個序列？ –

你可以嘗試的是保留一個客戶在本地存儲器打開你的頁面的第一次保持變量的副本，每當你得到一個新的隨機數時更新它。這消除了兩次獲得相同數字的可能性。即使在重新加載和瀏覽器重新啓動之後，本地存儲仍然非常粘性和持久性，堅持客戶端。

Occams剃鬚刀的解決方案：

<script> 
    var elems = $("div"); 
    if (elems.length) { 
     var keep = Math.floor(Math.random() * elems.length); 
     if(!window.localStorage.getItem('rand')) { 
      window.localStorage.setItem('rand', keep); 
     } 
     else { 
      while(keep == window.localStorage.getItem('rand')) { 
       keep = Math.floor(Math.random() * elems.length); 
      } 
      window.localStorage.setItem('rand', keep); 
     } 
     for (var i = 0; i < elems.length; ++i) { 
      if (i !== keep) { 
        $(elems[i]).hide(); 
      } 
     } 
    } 
</script>

這是一個非常便宜，簡單的解決方案。不知道爲什麼我被壓低了！

來源

2016-04-25 14:25:41

它可以被優化，因爲如果你是地球上最倒黴的人，你的腳本可能永遠運行：P –

最大概率;）。代碼長度越長，代碼運行速度越快 –

請至少說明您的代碼如何解決問題。只是未註釋的，未解釋的代碼的答案是沒有用的。 – meagar

我會在選擇一個新的索引之前先過濾掉舊的索引。事情是這樣的：

https://jsfiddle.net/jmarikle/1hdeyL4a/

// hide all elements 
var elems = $("div").hide(); 

// determine an index, presuming the lack of one to choose from 
var keep = Math.floor(Math.random() * (elems.length - 1)); 

// fetch the old index to exclude it 
var oldIndex = localStorage.getItem('36842935-last-index'); 

// excluding the old index, find a random new one and store its index 
var newIndex = elems.not(':eq('+oldIndex+')').eq(keep).show().index(); 

// store the index for next time 
localStorage.setItem('36842935-last-index', newIndex);

注意的是，使用.index()意味着，這將需要你的div被包裹在某種包裝的，他們是唯一的孩子。如果這是一個問題，你可以使用data-index或類似的東西建立一個手動索引。

來源

2016-04-25 15:19:06

將本地存儲設置爲'36842935-last-index'有什麼意義？爲什麼不簡單 – Adjit

@Adjit好問題。這是從我的jsfiddle直接複製。 jsfiddle不會將本地存儲限制爲單個保存的小提琴;所以從理論上講，如果我把它稱爲「last-index」，而其他用戶最近訪問過的其他用戶稱爲他們的last-index，那麼該用戶的功能可能會中斷。這是jsfiddle的問題。正因爲如此，我養成了一個習慣，就是用jsfiddle本地存儲我正在處理的任何問題的id問題。我很樂意使用內置的編輯器，但SO會阻止使用本地存儲。 –

有趣。這很好。謝謝。 – Adjit

這裏有一個方法是通過元素週期指定選擇匹配：

http://codepen.io/jkochis/pen/RaYaBg?editors=1010

// elements to cycle through 
var numElems = document.querySelectorAll("div").length; 
// number to increment on page load 
var divInc = parseInt(localStorage.getItem("divIncrement")); 
// does it exist? set it if not. 
if(divInc < 1 || Number.isNaN(divInc)){ 
    localStorage.setItem("divIncrement", 1); 
} else { 
    var inc = divInc + 1; 
    localStorage.setItem("divIncrement", inc); 
} 
// Retrieve it and do something with it 
document.querySelector('.increment').innerHTML = parseInt(localStorage.getItem("divIncrement")) % numElems;

來源

2016-04-25 15:36:23

可以以具有持久性數據使用window.localStorage。

但是，必須注意的是你初始化elems它是空的，所以如果你調用它的長度的方式，它將始終是當前的頁面

var index = 0; 
var storageIndex = window.localStorage.getItem('pictureIndex') 

if(storageIndex != null){ 
    index = storageIndex%elems.length; 

    //by doing %elems.length, you don't need to check to reset the index, your number will 
    //always be in the range of elems.length 
} 

window.localStorage.setItem('pictureIndex', index++); 

for (var i = 0; i < elems.length; ++i) { 
    if (i !== index) { 
    $(elems[i]).hide(); 
    } 
}

來源

2016-04-25 16:00:14 Adjit

每次頁面加載時都顯示不同的div（不是隨機的）

回答

相關問題