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个仍为空）。

我需要分配到框中的文本集（box = divs with classnames＆＃34; case + number＆＃34;）每个都在一个单独的html文件中（名为＆＃34; case1.html＆＃ 34;，＆＃34; case2.html＆＃34;等）。我希望这些html文件构成数组，并且这个数组要随机排列＆＃34;随机＆＃34;进入每个盒子。

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

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

})

plnkr 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);

创建一个外部html页面数组并将其重新分组为几个div

2 个答案: