Непрерывный цикл по текстовому массиву JavaScript onclick - PullRequest
Новая
       2

Непрерывный цикл по текстовому массиву JavaScript onclick

2 голосов
/ 21 октября 2011

У меня есть текстовый массив.Я хочу отобразить первую запись при загрузке страницы.А затем замените текст следующей записью, когда я нажму кнопку.Если я продолжу нажимать кнопку, я хочу, чтобы текст непрерывно заменялся на следующее, что находится в массиве, и когда оно дойдет до конца, начнем с первой записи.Может кто-нибудь, пожалуйста, покажите мне пример кода для этого.Я новичок в этом.

Вот что у меня есть 

$(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]); 
    } 
 });
});

Ответы [ 3 ]

4 голосов
/ 21 октября 2011

Что-то вроде следующего должно помочь: 

<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>

Редактировать

Радомизированная версия: 

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);
  }
}());
2 голосов
/ 21 октября 2011

Следующие должны сделать это 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 ;
 });
});

Ваш код записывал все три значения каждый раз, когда вы щелкали по нему (но отображало только последнее значение)

1 голос
/ 21 октября 2011

Я думаю, что-то подобное будет работать

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...