Question

我有一个文本数组。我想在页面加载时显示第一个条目。然后在单击按钮时将文本替换为下一个条目。如果我一直单击按钮，我希望文本不断被替换为数组中的下一个文件，并且当它到达结束时从第一个条目开始。有人可以给我看一个示例代码。我是新手。

这就是我所拥有的

$(document).ready(function(){
  var arr = new Array("One","Two","Three");
  var len=arr.length;
  $('#next').click(function(){ 
    for(var i=0; i<len; i++) { 
      $('#quote').html(arr[i]); 
    } 
 });
});

Answer 1

以下内容应该可以解决问题：

<script type="text/javascript">
var nextWord = (function() {
  var wordArray = ['fe','fi','fo','fum'];
  var count = -1;
  return function() {
    return wordArray[++count % wordArray.length];
  }
}());

</script>

<p id="foo">&nbsp;</p>

<button onclick="
  document.getElementById('foo').innerHTML = nextWord();
">Update</button>

修改

Radomised版本：

var nextWord = (function() {
  var wordArray = ['fe','fi','fo','fum'];
  var copy;
  return function() {
    if (!copy || !copy.length) copy = wordArray.slice();
    return copy.splice(Math.random() * copy.length | 0, 1);
  }
}());

Answer 2

以下内容应http://jsfiddle.net/mendesjuan/9jERn/1

$(document).ready(function(){
  var arr = ["One","Two","Three"];
  var index = 0;
  $('#next').click(function(){ 
    $('#quote').html(arr[index]); 
    index = (index + 1) % arr.length ;
 });
});

您的代码每次单击时都会写入所有三个值（但只显示最后一个值）

Answer 3

我觉得这样的事情会起作用

javascript看起来像：

// assuming maxTextArrayIndex & textArray are defined & populated
var textDisplayIndex = -1;
document.getElementById('textDisplay').innerHTML = textArray[textDisplayIndex];

function nextElement()
{
    textDisplayIndex += 1;
    if (textDisplayIndex > maxTextArrayIndex)
    {
        textDisplayIndex = 0;
    }

    document.getElementById('textDisplay').innerHTML = textArray[textDisplayIndex];
}

html看起来像：

<body onLoad=nextElement()>
...
<elementToDisplayText id=textDisplay></elementToDisplayText>
<button onClick=nextElement()>Next</button>

连续循环遍历JavaScript文本数组onclick

3 个答案:

修改