每次页面加载时都显示不同的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（不是随机的）

回答

相关问题