Текстовое содержимое рандомизации при загрузке

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"> 
 
\t <div class="inner"> 
 
\t \t <a href="" class=""> 
 
\t \t \t <div class="text"> 
 
\t \t \t \t <div class="title"> 
 
\t \t \t \t \t <span>Test</span> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="sub-title"> 
 
\t \t \t \t \t <span>Test</span> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </a> 
 
\t </div> 
 
</div>

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