将特定文本保存在单独的 div 中，并在加载时使用随机图像

Question

我目前有一些脚本可以在用户刷新页面时随机化图像。

var large_images = [
  "wp-content/themes/workroomv2/images/headshot1.jpg",    
  "wp-content/themes/workroomv2/images/headshot2.jpg",    
  "wp-content/themes/workroomv2/images/headshot3.jpg",    
  "wp-content/themes/workroomv2/images/large1.jpg",   
  "wp-content/themes/workroomv2/images/large2.jpg",   
  "wp-content/themes/workroomv2/images/large3.jpg" 
];

var arr = [];

$.each(large_images,
  function(i, el) {
    setTimeout(function() {
      arr.push(el);
      if (arr.length === large_images.length) {
        $(".item.large img")
          .attr("src", function(i, src) {
            return arr[i]
        })
    }
   }, 1 + Math.floor(Math.random() * 5))
 });

但是我想在图像中保留某些内容，因为这是描述团队成员（名称、内容、按钮）。在考虑与上述相同但由于文本是随机的而无法使用文本之后。 HTML结构如下。我需要在每个跨度中放置文本。

    <div class="item">
        <div class="inner">
            <a href="#">
                <img id="" class="people" src="" alt="test">
                <div class="text">
                    <span class="title"></span>
                    <span class="sub-title"></span>
                    <span class="content"></span>
                </div>
            </a>
        </div>
    </div>

当图像随机化时，我无法弄清楚如何将内容与图像一起保存在哪里。对此的任何建议都会很棒。

Answer 1

创建一个对象数组并使用索引设置文本，这里是一个例子

//Create an array of object with all the required data
var large_images = [{
    src: "wp-content/themes/workroomv2/images/headshot1.jpg",
    title: "yahooo"
}, {
    src: "wp-content/themes/workroomv2/images/headshot2.jpg",
    title: "google"
}];

//When iterating also set the text using the array element
$(".item.large img").attr("src", function(i, src) {

  //Find the title span which is child of images siblings
  $(this).next('.text').find('.title').text(arr[i].title);

  return arr[i].src
})

jQuery(function($) {
  var large_images = [{
    src: "wp-content/themes/workroomv2/images/headshot1.jpg",
    title: "yahooo"
  }, {
    src: "wp-content/themes/workroomv2/images/headshot2.jpg",
    title: "google"
  }];

  var arr = [];

  $.each(large_images, function(i, el) {
    setTimeout(function() {
      arr.push(el);
      if (arr.length === large_images.length) {
        $(".item.large img").attr("src", function(i, src) {

          //Find the title span which is child of images siblings
          $(this).next('.text').find('.title').text(arr[i].title);
          $(this).attr('alt', arr[i].src);
          return arr[i].src
        })
      }
    }, 1 + Math.floor(Math.random() * 5))
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item large">
  <div class="inner">
    <a href="#" class="">
      <img id="" class="people" src="" alt="test">
      <div class="text">
        <span class="title"></span>
      </div>
    </a>
  </div>
</div>
<div class="item large">
  <div class="inner">
    <a href="#" class="">
      <img id="" class="people" src="" alt="test">
      <div class="text">
        <span class="title"></span>
      </div>
    </a>
  </div>
</div>