使用setInterval方法在jQuery中填充来自对象的数据

Question

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

我无法得到预期的结果，请看我的代码到目前为止，并让我知道什么最好的方式来考虑这一点，以获得我的结果？

其结果如下：

On load: fadeIn：发现/更多/额外行

2000 NEW后的： fadeOut：前一行，fadeIn：LOREM IPSUM /NEW previous

2000 10后的： 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，.

这是通过使用模算子：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>

​