如何遍歷一個jQuery數組，然后一次輸出一項（從索引0開始）？

Question

我正在嘗試收集用戶響應並將其添加到答案數組。 然后，我想在.user-answer div顯示最新的用戶輸入（ .user-answer div answers[0] ）。 我已經設法解決了這一部分，但是如果您發現更好的方法，請告訴我。

第二部分是我想一次在.dynamic-content h2插槽中顯示一個數組中的項。 我需要遍歷數組（從answers [0]開始），拉出每個項目，將其顯示在div中，然后移至下一個項目，並將其顯示在div 。

這是CodePen的鏈接。

HTML

<div class="answer">
  <h1>Life, Liberty, and </h1>
</div>

<div class="user-answer">
  <h1>_________</h1>
</div>

<input type="text"/>
<input type="submit"/>

<div class="dynamic-content">
  <h1>What is your pursuit of happiness?</h1>
  <h2>Output array items here</h2>
</div>

的JavaScript

// create an empty array
var answers = []; 

// STORE AND OUTPUT DATA ON SUBMISSION

function handleUserInput() {

  // store user input
  var userInput = $('input[type=text]').val(); 

  // append input value to answers array
  answers.unshift(userInput); 

  // add latest user input into the HTML
  $('.user-answer').html('<h1>' + answers[0] + '</h1>'); 

}

// RUN FUNCTION ON SUBMISSION

$('input[type=submit]').on('click', function() {
  handleUserInput();
});

Answer 1

首先，我不知道您是要在服務器端還是在客戶端執行此操作，但是對於服務器端，您需要使其與服務器端腳本語言（例如PHP或Perl）一起使用 。 從側面看，您需要在用戶單擊“提交”按鈕時取消默認的提交事件，否則頁面將刷新以發布表單數據。

因此，要在不刷新頁面的情況下執行此操作，請首先將事件添加到onclick事件，然后將其傳遞給您的handleUserInput函數，如下所示：

$('input[type=submit]').on('click', function(e) {
  handleUserInput(e);
  rotate();
});

然后，通過對事件對象使用preventDefault來取消事件：

e.preventDefault();

現在，以顯示數據.dynamic-content並添加答案h2標簽，你首先需要刪除所有的h2元素（因為你已經有一個h2元素存在，或者你也可以prepend如果刪除了h2 Output array items here標記），然后從第一個開始添加所有答案，如下所示：

$('.dynamic-content h2').remove();

$.each(answers, function(i, v) {
  $('.dynamic-content').append($('<h2/>').text(v));
});

最終代碼將如下所示：

var answers = []; // create an empty array

// STORE DATA ON SUBMISSION
function handleUserInput(e) {
  e.preventDefault();

  var userInput = $('input[type=text]').val(); // store user input

  answers.unshift(userInput); // append value to answers array

  // $('.user-answer').fadeIn().html('<h1>' + answers[0] + '</h1>').delay( 500 ).fadeOut(); // add user input into the HTML

  $('.user-answer').html('<h1>' + answers[0] + '</h1>'); // add user input into the HTML

  $('.dynamic-content h2').remove();

  $.each(answers, function(i, v) {
    $('.dynamic-content').append($('<h2/>').text(v));
  });

  // $('.answer').html('<h1>' + answers[0] + '</h1>'); 
  // $.each(answers[0 + i], function() {
  //   $('.answer').fadeIn().html('<h1>' + answers + '</h1>').delay( 500 ).fadeOut();
  // });

}

$('input[type=submit]').on('click', function(e) {
  handleUserInput(e);
  rotate();
});

http://codepen.io/clytras/pen/zoBXpE

Answer 2

只需將您的JS更改為：

  var answers = []; // create an empty array // STORE DATA ON SUBMISSION function handleUserInput() { var userInput = $('input[type=text]').val(); $('.user-answer').html('<h1>' + userInput + '</h1>'); answers.push(userInput); $('.dynamic-content h2').html(answers + ', '); } $('input[type=submit]').on('click', function() { handleUserInput(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="answer"> <h1>Life, Liberty, and </h1> </div> <div class="user-answer"> <h1>_________</h1> </div> <input type="text"/> <input type="submit"/> <div class="dynamic-content"> <h1>What is your pursuit of happiness?</h1> <h2>Output array items here</h2> </div> 

Answer 3

這不是最好的方法，但是可以解決。 就像您要求動態更改SAME DIV一樣，因此沒有其他項被創建，它們只是“更改”

添加此功能：

function rotateTerm() {
  if(answers.length>0){
  var ct = $("#rotate").data("term") || 0;
  $("#rotate").data("term", ct == answers.length -1 ? 0 : ct + 1).text(answers[ct]).fadeIn().delay(2000).fadeOut(200,function(){
rotateTerm();
  });
 }
}
$(rotateTerm);

然后在您的提交中輸入：

$('input[type=submit]').on('click', function() {
  handleUserInput(); 
  $(rotateTerm);
});

感謝Nick Craver在此主題中的回答，使CodePen可以正常工作。