Question

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

我无法获得理想的结果，请看下面的代码，让我知道思考这个问题的最佳方法是什么？

结果应如下所述：

正在加载： fadeIn：发现/更多/额外的线

2000ms之后： fadeOut：上一行， fadeIn：LOREM IPSUM /新地面

2000ms之后： fadeOut：上一行， fadeIn：10个豪华套房/可租赁/可租用

我当时正在考虑使用将名为“ count”的变量设置为0，然后在setInterval方法中将count增加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>

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

1 个答案: