文本内容随机加载

Question

我有一个网站，我有不同的框，其中包含某些内容，当用户刷新内容时，每次都需要在不同的框中随机化。基本上刷新时，内容会随机化。

到目前为止，我已经设法使用类似的代码（Random Images on page load）在加载时随机化图像，但出于某种原因，当尝试使用html时，它不会将数据注入到我要说的内容中，因为当您刷新页面时，不同的区域会填充不同的文本。粘贴到控制台到文本时，它只列出对象数组。如果你能指出我出错的地方会很棒。 HTML和脚本在下面。

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").hasClass(".text", function(i) {
          $(this).next('.has-text').find('.number span').text(arr3[i].number);
          $(this).next('.has-text').find('.sub-title span').text(arr3[i].sub_title);
        });
      }
    }, 1 + Math.floor(Math.random() * 5));
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="item small has-text small-offset-large">
  <div class="inner">
    <a href="" class="">
      <div class="text">
        <div class="title number">
          <span>2</span>
        </div>
        <div class="sub-title">
          <span>Marketers</span>
        </div>
      </div>
    </a>
  </div>
</div>
<div class="item small small secondary has-text test">
	<div class="inner">
		<a href="" class="">
			<div class="text">
				<div class="title">
					<span>Test</span>
				</div>
				<div class="sub-title">
					<span>Test</span>
				</div>
			</div>
		</a>
	</div>
</div>

Answer 1

我希望这对你有所帮助。对我来说不清楚你的目标是什么。

＆＃13;

＆＃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",
}];

$.each($(".item"), function() {
  var $item = $(this);
  $.each(text_boxes, function(i, el) {
      setTimeout(function() {
        if($item.find('div.text').length) {
          $item.find('.number span').text(text_boxes[i].number);
          $item.find('.sub-title span').text(text_boxes[i].sub_title);
        }
     }, i * 1000);
   });
});

＆＃13;

div.item {
  margin: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="item small has-text small-offset-large">
    <div class="inner">
        <a href="" class="">
            <div class="text">
                <div class="title number">
                    <span>2</span>
                </div>
                <div class="sub-title">
                    <span>Marketers</span>
                </div>
            </div>
        </a>
    </div>
</div>

<div class="item small has-text small-offset-large">
    <div class="inner">
        <a href="" class="">
            <div class="text">
                <div class="title number">
                    <span>2</span>
                </div>
                <div class="sub-title">
                    <span>Marketers</span>
                </div>
            </div>
        </a>
    </div>
</div>

<div class="item small has-text small-offset-large">
    <div class="inner">
        <a href="" class="">
            <div class="text">
                <div class="title number">
                    <span>2</span>
                </div>
                <div class="sub-title">
                    <span>Marketers</span>
                </div>
            </div>
        </a>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;