一次只显示一个数组项（Javascript）答案

【问题标题】：Only display one array item at a time (Javascript)一次只显示一个数组项（Javascript）
【发布时间】：2013-03-28 20:55:44
【问题描述】：

我试图从本质上创建一个代码，它一次显示一个从数组中获取的单个字符串项。基本上我只是希望它显示一个项目然后过渡到下一个项目，我的 Javascript 技能非常初级（Jquery 可能会更好。）

这是我的代码：

var title= ['Orange', 'Apple', 'Mango', 'Airplane', 'Kiwi'];
for (var i=0; i<title.length; i++){
document.write(title[i]);
}

我要补充什么？

非常感谢！

【问题讨论】：

“我的 Javascript 技能非常初级” vs. “Jquery 可能更适合这个”。不！首先掌握语言，然后使用框架来摆脱所有讨厌的东西。此外，目前您只能一次编写所有内容。您应该了解 DOM 操作。
不要使用 document.write，继续阅读使用 innerHTML。

标签： javascript arrays loops

【解决方案1】：

从了解document.getElementById 和setInterval 开始。

http://jsfiddle.net/wtNhf/

HTML：

<span id="fruit"></span>

Javascript：

var title = ['Orange', 'Apple', 'Mango', 'Airplane', 'Kiwi'];

var i = 0;  // the index of the current item to show

setInterval(function() {            // setInterval makes it run repeatedly
    document
        .getElementById('fruit')
        .innerHTML = title[i++];    // get the item and increment i to move to the next
    if (i == title.length) i = 0;   // reset to first element if you've reached the end
}, 1000);                           // 1000 milliseconds == 1 second

【讨论】：

【解决方案2】：

我尽量保持最简单

HTML

<div id="my_id"></div>

Javascript

var counter = 0;
var words = ['jaja', 'jojo', 'lol', 'troll', 'pk!'];
var my_div = document.getElementById('my_id');

function next_word()
{
    my_div.innerHTML = words[counter % words.length];
    counter += 1;
}

setInterval(next_word, 100);

http://jsfiddle.net/zTLqe/

【讨论】：

【解决方案3】：

http://jsfiddle.net/3fj9E/1/

 var span = $('span');
 var div = 0;
 var fading_in = function () {
 $(span[div++] || []).fadeIn(500, arguments.callee);
 }
setTimeout(fading_in, 400);

html

 <div id='example'>
 <span>orange </span>
 <span>apple </span>
 <span>kiwi </span>
<span>banana </span>
<span> melon</span>
</div>

css

 span {display:none}

【讨论】：

这与对本质上在 dom 数组中的 html 元素设置间隔不同的方式