Question

我想要3个按钮，

添加条目按钮 - 此按钮可创建一个新输入框，以添加到先前创建的输入框中。
编辑上一个按钮 - 创建新输入框后，此按钮允许用户按顺序编辑先前输入到框中的数据。
编辑下一个按钮 - 这是我需要帮助的地方，使用按钮＃2后，用户无法移动到下一个条目。唯一的选择是使用Button＃1添加另一个Input。我需要用户能够前进到下一个条目，而不是创建新的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/>

Answer 1

这应该有用。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: