创建一个外部 html 页面数组并将其洗牌到几个 div 中答案

【问题标题】：Create an array of external html pages and shuffle it into several divs创建一个外部 html 页面数组并将其洗牌到几个 div 中
【发布时间】：2016-02-14 14:37:44
【问题描述】：

我目前正在开发一个包含 div 网格 (4x4) 的网站，每次重新加载时都必须将一组文本打乱到该网格中。这基本上看起来like this at the moment。

我的 index.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 文件构成数组，并将这个数组“随机”打乱到每个盒子中。

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

【问题讨论】：

标签： javascript jquery html arrays shuffle

【解决方案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")
  })

})

plnkrhttp://plnkr.co/edit/rAhq6fkbUqM3BfnahAVy?p=preview

【讨论】：

【解决方案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);

【讨论】：