Question

我有一个网站，你刷新页面，一个框（div）内的内容将在加载时改变（随机）。这不仅仅是一个盒子，而是其他许多盒子。我设法按照http://codepen.io/anon/pen/GjYNLo?editors=1011使内容随机化，但它是重复而不是循环并将不同的数组应用于每个主div。我希望每个框都显示一个数组，当你刷新页面时，内容会移动并显示在其他地方。

<div class="item small has-text tertiary">
  <div class="inner">
    <a href="" class="">
      <div class="text">
        <div class="number">
          <span></span>
        </div>
        <div class="sub-title">
          <span></span>
        </div>
      </div>
    </a>
  </div>
</div>
<br>
<div class="item small has-text tertiary">
  <div class="inner">
    <a href="" class="">
      <div class="text">
        <div class="number">
          <span></span>
        </div>
        <div class="sub-title">
          <span></span>
        </div>
      </div>
    </a>
  </div>
</div>


var text_boxes = [{
  number: "2",
  sub_title: "Marketers",
}, {
  number: "75%",
  sub_title: "Average sales increase",
}, {
  number: "4",
  sub_title: "Developers",
}, {
  number: "6",
  sub_title: "Full Time",
}, {
  number: "45",
  sub_title: "Sites Launched",
}, {
  number: "2",
  sub_title: "Marketers",
}];

var arr3 = [];

$.each(text_boxes,
  function(i, el) {
    setTimeout(function() {
      arr3.push(el);
      if (arr3.length === text_boxes.length) {
        $(".item.has-text", function(ii) {
          $(this).find('.number span').text(arr3[i].number);
          $(this).find('.sub-title span').text(arr3[i].sub_title);
        });
      }
    }, 1 + Math.floor(Math.random() * 5));
  });

Answer 1

您可以获得如下随机的独特内容：

＆＃13;

var text_boxes = [{number: "2",sub_title: "Marketers",}, {number: "75%",sub_title: "Average sales increase",}, {number: "4",sub_title: "Developers",}, {number: "6",sub_title: "Full Time",}, {number: "45",sub_title: "Sites Launched",}, {number: "2",sub_title: "Marketers",}],
    len = text_boxes.length,
    uniqueRandoms = [],
    getRandomIndex = function () {
      if (!uniqueRandoms.length) {
        for (var i = 0; i < len; i++) {
          uniqueRandoms.push(i);
        }
      }
      var index = Math.floor(Math.random() * uniqueRandoms.length),
          val = uniqueRandoms[index];
      uniqueRandoms.splice(index, 1);
      return val;
    };

$('.item.has-text').each(function () {
  var index = getRandomIndex();
  $(this).find('.number span').text(text_boxes[index].number);
  $(this).find('.sub-title span').text(text_boxes[index].sub_title);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item small has-text tertiary">
  <div class="inner">
    <a href="" class="">
      <div class="text">
        <div class="number">
          <span></span>
        </div>
        <div class="sub-title">
          <span></span>
        </div>
      </div>
    </a>
  </div>
</div>
<br>
<div class="item small has-text tertiary">
  <div class="'">
    <a href="" class="">
      <div class="text">
        <div class="number">
          <span></span>
        </div>
        <div class="sub-title">
          <span></span>
        </div>
      </div>
    </a>
  </div>
</div>

＆＃13;

重新加载页面的随机内容不循环

1 个答案: