Question

每次页面加载时我都需要一个脚本来显示不同的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总是不同的？

Answer 1

您可以尝试保留客户端第一次在本地存储中打开页面时获得的保留变量的副本，并在每次获得新的随机数时更新它。这消除了两次获得相同数字的可能性。本地存储非常具有粘性和持久性，即使在重新加载和浏览器重新启动后也能保持客户端。

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>

这是一种非常便宜且简单的解决方案。不知道为什么我被投票了！

Answer 2

在选择新索引之前，我会先过滤掉旧索引。像这样：

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或类似的东西构建手动索引。

Answer 3

这是循环匹配给定选择器的元素的一种方法：

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;

Answer 4

您可以使用window.localStorage来获取持久数据。

但是，您必须注意初始化elems它为空的方式，因此如果您调用它的长度，它将始终是当前位于div的{{1}}的数量。页

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();
  }
}

每次页面加载时显示不同的div（非随机）

4 个答案: