创建一个外部 html 页面数组，并将其随机排列成几个 div

Question

我目前正在开发一个由div(4x4(网格组成的网站，每次重新加载时都必须将一组文本洗牌。目前基本上是这样的。

我的索引.htm如下：

<div class="container">
<div class="colonne">
<div class="case">
<span class="boxwatermark">1</span>
<span class="case1">
</span>
</div>
<div class="case">
<div class="boxwatermark">5</div>
<span class="case5">
</span>
</div>
<div class="case">
<div class="boxwatermark">9</div>
<span class="case9">
</span>
</div>
...

依此类推，最多 15 个(16 个保持为空(。

我需要分发到框中的文本集(框 = 带有类名"case+number"的div(每个都在一个单独的 html 文件中(名为"case1.html"、"case2.html"等(。我希望这些html文件构成数组，并将该数组"随机"洗牌到每个框中。

在过去的两天里，我尝试了几件事，但这个问题的解决方案目前似乎超出了我(小(的能力......这个论坛上对此类问题的一些关注给我留下了深刻的印象，并决定请求您的帮助。谢谢！

Answer 1

尝试使用 Array.prototype.slice() ， Array.prototype.splice() ， .eq() ， .each() ， .load()

$(function() {
  var c = "case";
  var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15];
  var copy = arr.slice(0);
  $("." + c).each(function() {
    var curr = copy.splice(Math.floor(Math.random() * copy.length), 1)[0];
    $(this).load(c + curr + ".html")
  })
})

http://plnkr.co/edit/rAhq6fkbUqM3BfnahAVy?p=preview 普罗提

Answer 2

试试这个 https://fiddle.jshell.net/

var shuffle = function (htmls) {
    for (var j, x, i = htmls.length; i; j = parseInt(Math.random() * i), x = htmls[--i], htmls[i] = htmls[j], htmls[j] = x);
    return htmls;
};
var display = function (shuffledArray) {
    var index = 0;
    for (var spot in shuffledArray) {
        index++;
        var cssClass = '.case' + index;
        var div = document.querySelector(cssClass);
        div.innerHTML = shuffledArray[spot];
    }
}
if (!sessionStorage.getItem('htmlFiles')) {
    var htmls = [];
    htmls[0] = 'this a text for example';
    htmls[1] = 'Another text for example';
    htmls[2] = 'Yet anohter text for example';
    htmls[3] = 'The texts keep up comming';
    htmls[4] = 'More example texts here';
    htmls[5] = 'Even more texts';
    htmls[6] = 'The last example';
    sessionStorage.setItem('htmlFiles', htmls);
}
var htmls = sessionStorage.getItem('htmlFiles').split(',');
var shuffledArray = shuffle(htmls);
display(shuffledArray);