创建一个外部 html 页面数组并将其随机放入多个 div

Question

我目前正在开发一个由 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 个文件构成数组，并将这个数组 "randomly" 打乱到每个框中。

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

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")
  })

})

plnkrhttp://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);

创建一个外部 html 页面数组并将其随机放入多个 div

Create an array of external html pages and shuffle it into several divs

javascript

jquery

html

arrays

shuffle