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

Question

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

我无法获得所需的结果，请参阅下面的代码，并让我知道如何看待这一点以获得我的结果？

结果应如下所述：

有载：fadeIn：发现/更多/额外线路

2000毫秒后：CCD_ 4：前一行，fadeIn:LOREM IPSUM/newgrounds

2000毫秒后：CCD_ 6：前一行，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>