javascript - 创建一个外部 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 仍为空)。

我需要分发到框中的文本集(boxes = divs，类名为“case+number”)分别位于一个单独的 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")
  })

})

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