Question

我正在尝试收集用户响应并将其添加到answers数组中。然后我想在ActiveRecord::Base.sanitize(DateTime.now) => "'2016-11-15 09:47:54'"中显示最新的用户输入（answers[0]）。我已经设法得到了那部分，但如果你看到更好的方法，那么请告诉我。

第二部分是我想在.user-answer div插槽中一次显示数组中的项目。我需要遍历数组（从answers [0]开始），拉出每个项目，在div中显示它，然后移动到下一个项目并在.dynamic-content h2中显示。

以下是CodePen的链接。

HTML

div

的JavaScript

<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 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改为：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

这不是最好的方式，但在这里。此方法就像您要求动态更改SAME DIV一样，因此不会创建其他项目，只需更改＆＃34;

添加此功能：

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);
});

工作CodePen感谢Nick Craver的回答thread。

如何循环遍历jquery数组，然后一次输出一个项目（从索引0开始）？

HTML

的JavaScript

3 个答案: