如何创建一个允许用户向前遍历用户最近输入的数据的按钮？答案

【问题标题】：How do I create a button that allows a user to traverse forward through recent data input by the user?如何创建一个允许用户向前遍历用户最近输入的数据的按钮？
【发布时间】：2015-06-06 00:34:14
【问题描述】：

我想要 3 个按钮，

添加条目按钮 - 此按钮创建一个新输入框，以添加到之前创建的输入框。
编辑上一个按钮 - 创建新输入框后，此按钮允许用户按顺序编辑以前输入到框中的数据。
编辑下一个按钮 - 这是我需要帮助的地方，使用按钮 #2 后，用户无法移动到下一个条目。唯一的选择是使用按钮 #1 添加另一个输入。我需要用户能够前进到下一个条目，而不是创建新的 textPot。

如何在 jquery 中制作 Button #3？

var input, inputCount = 0;

function newInput() {
  $('#box > input').hide();
  inputCount++;
  input = $('<input>')
    .attr({
      'type': 'text',
      'placeholder': 'Entry_' + inputCount,
      'data-id': inputCount
    })
    .appendTo($('#box'));
}

function editPreviousEntry() {
  var cId = $('#box > input:visible').data('id');

  if (cId - 1 !== 0) {
    $('#box > input').hide();
    $('#box > input:nth-child(' + (cId - 1) + ')').show();
  }
  $('#box > input:nth-child(' + inputCount + ')').hide();
}

input {
  display: block;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="newInput()">Add Entry</button>
<button id="edit" onclick="editPreviousEntry()">Edit Previous Entry</button>
<button id="edit" onclick="editNextEntry()">Edit NExt Entry</button>
<br/>

<br/><span id="box"></span>
<br/>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

这应该可行。

var input, inputCount = 0;

function newInput() {
  $('#box > input').hide();
  inputCount++;
  input = $('<input>')
    .attr({
      'type': 'text',
      'placeholder': 'Entry_' + inputCount,
      'data-id': inputCount
    })
    .appendTo($('#box'));
}

function editPreviousEntry() {
  var cId = $('#box > input:visible').data('id');

  if (cId - 1 !== 0) {
    $('#box > input').hide();
    $('#box > input:nth-child(' + (cId - 1) + ')').show();
  }
  $('#box > input:nth-child(' + inputCount + ')').hide();
}

function editNextEntry() {
    var cId = $('#box > input:visible').data('id');

    if (cId + 1 <= inputCount) {
        $('#box > input').hide();
        $('#box > input:nth-child(' + (cId + 1) + ')').show();
    }
}

input {
  display: block;
  margin-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onclick="newInput()">Add Entry</button>
<button id="edit" onclick="editPreviousEntry()">Edit Previous Entry</button>
<button id="edit" onclick="editNextEntry()">Edit NExt Entry</button>
<br/>

<br/><span id="box"></span>
<br/>

【讨论】：