使用 jQuery 中的 setInterval 方法从对象中填充数据

Question

我正在尝试使用来自我定义的对象的数据填充 <span> 标记。数据需要每 X 秒更改一次（淡入/淡出），这是我在 setInterval 方法中设置的。

我无法获得预期的结果，请查看我目前的代码，并告诉我如何最好地考虑这一点以获得我的结果？

结果应如下所述：

加载中： fadeIn: 发现/更多/额外线路

2000 毫秒后： fadeOut：上一行， fadeIn: LOREM IPSUM / 新领域

2000 毫秒后： fadeOut：上一行， fadeIn: 10 架豪华/飞机供/租用

我正在考虑使用将名为“count”的变量设置为 0，然后在 setInterval 方法中将计数增加 1，以将文本更改为数组中的下一组数据。

注意：'/' 表示下一行

$(document).ready(function() {

  $('.slideTitle span').hide();

  var imgObj = {
    "slideData": [{
      "slideHeading1": "DISCOVER",
      "slideHeading2": "MORE",
      "slideHeading3": "Extra Line",
    }, {
      "slideHeading1": "LOREM IPSUM",
      "slideHeading2": "NEW GROUNDS",
      "slideHeading3": "",
    }, {
      "slideHeading1": "10 LUXURY",
      "slideHeading2": "PLANES FOR",
      "slideHeading3": "HIRE",
    }]
  };

  $.each(imgObj, function(key, data) {
    $('.slideTitle .heading-1').append(data[0].slideHeading1);
    $('.slideTitle .heading-2').append(data[0].slideHeading2);
    $('.slideTitle .heading-3').append(data[0].slideHeading3);
  });

  $(function() {
    $('span.heading-1').fadeIn();
    $('span.heading-2').fadeIn();
    $('span.heading-3').fadeIn();
    setInterval(function() {
      // code to change the text to the next array in the object
      // i.e. next text that should fade in will be LOREM IPSUM / NEW GROUNDS
    }, 2000);
  });
});

.slideTitle {
  font-size: 22px;
  color: #333;
}

.slideTitle span {
  display: block;
}

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

<h2 class="slideTitle">
  <span class="heading-1"></span>
  <!-- line 1 -->
  <span class="heading-2"></span>
  <!-- line 2 -->
  <span class="heading-3"></span>
  <!-- line 3 -->
</h2>

Answer 1

如果您想手动执行此操作，您可以执行以下操作： 关键是不要忘记换行，使其值如下所示：0, 1, 2, 0, 1, 2, ...

这是通过使用 modulo operator : count = (count + 1) % size_of_your_data 来完成的

$(document).ready(function() {

  $('.slideTitle span').hide();

  var imgObj = {
    "slideData": [{
      "slideHeading1": "DISCOVER",
      "slideHeading2": "MORE",
      "slideHeading3": "Extra Line",
    }, {
      "slideHeading1": "LOREM IPSUM",
      "slideHeading2": "NEW GROUNDS",
      "slideHeading3": "",
    }, {
      "slideHeading1": "10 LUXURY",
      "slideHeading2": "PLANES FOR",
      "slideHeading3": "HIRE",
    }]
  };

  $.each(imgObj, function(key, data) {
    $('.slideTitle .heading-1').append(data[0].slideHeading1);
    $('.slideTitle .heading-2').append(data[0].slideHeading2);
    $('.slideTitle .heading-3').append(data[0].slideHeading3);
  });

  $(function() {
    $('span.heading-1').fadeIn();
    $('span.heading-2').fadeIn();
    $('span.heading-3').fadeIn();
    
    let count = 0;
    setInterval(function() {
      count = (count + 1) % imgObj.slideData.length;
      const newData = imgObj.slideData[count];
      $('span.heading-1').text(newData.slideHeading1).fadeIn();
      $('span.heading-2').text(newData.slideHeading2).fadeIn();
      $('span.heading-3').text(newData.slideHeading3).fadeIn();
    }, 2000);
  });
});

.slideTitle {
  font-size: 22px;
  color: #333;
}

.slideTitle span {
  display: block;
}

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

<h2 class="slideTitle">
  <span class="heading-1"></span>
  <!-- line 1 -->
  <span class="heading-2"></span>
  <!-- line 2 -->
  <span class="heading-3"></span>
  <!-- line 3 -->
</h2>