加载时随机化的文本内容答案

【问题标题】：Text content randomising on load加载时随机化的文本内容
【发布时间】：2017-02-27 09:57:18
【问题描述】：

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

到目前为止，我已经设法使用类似代码（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>

【问题讨论】：

.hasClass(".text" 应该是 .hasClass("text"。现在这个方法不接受任何回调方法，所以无论如何这不会循环。
我怎样才能让它现在循环？我现在在控制台中不断收到“数字”未定义的错误@A.Wolff

标签： javascript jquery arrays math random

【解决方案1】：

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

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

div.item {
  margin: 20px;
}

<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>

【讨论】：