如何创建允许用户倒退的按钮？

Question

A）如何制作

的Jquery按钮

1. 添加新的TextBox

2. TextBox的Id，Name和占位符随每个新textBox的增加而增加

3. 并隐藏上一个TextBox。

B）在jquery中创建另一个按钮

1. 显示隐藏的textBox和

2. 将新文本框隐藏到用户输入

var input,
    inputCount = 0;

function newInput() {
  inputCount++;
  if (input !== undefined) {
    input.type = "hidden";
  }


  input = document.createElement("input");
  input.type = "text";
  input.name = input.id = input.placeholder = "Entry_" + inputCount;
  document.getElementById("box").appendChild(input);
}

<button type="button" onclick="newInput()">Add Entry</button>
<button id="edit">Edit Previous Entry</button>
<br/>

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

Answer 1

$（＆＃39; #box＆gt; input＆＃39;）。show（）;这是我的jquery代码，满足您的要求：

＆＃13;

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

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

<br/>

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

<!-- 
A) How do I make a Jquery Button that 
1)Add a new textBox, 
2)The Id, Name, and placeholder of the textBox, increases with each new textBox, 
3) and hides previous textBox. 

B) Create another button in jquery that 
1) shows hidden textBox, and 
2) hides new textbox to user unput 
-->

＆＃13;

＆＃13;

＆＃13;

Answer 2

试试这个：

＆＃13;

＆＃13;

var box;
$(function() {
  box = $('#box');
  $('#add').on('click', addEntry);
  $('#edit').on('click', editEntry);
});

var hdn;
var cnt = 0;
var txt;

var addEntry = function(e) {
  if (hdn) {
    $('input[name=entry]').prop('type', 'hidden');
  }
  if (txt) {
    hdn = txt;
    txt.prop('type', 'text');
  }
  if (txt && !$.trim(txt.val())) {
    txt.val('').focus(); //empty text, don't hide
    return;
  }
  if (txt) {
    hdn = txt;
    hdn.prop('type', 'hidden');
  }
  txt = $('<input>');
  txt.prop({
    'type': 'text',
    'placeholder': 'Entry ' + (++cnt),
    'name': 'entry'
  });
  box.append(txt);
};

var editEntry = function(e) {
  $('input[name=entry]').prop('type', 'hidden');
  if (txt) {
    txt.prop('type', 'hidden');
  }
  if (hdn) {
    hdn.prop('type', 'text');
    if (hdn.prev(':hidden').length) {
      hdn = hdn.prev();
    }
  }
};

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button type="button" id='add'>Add Entry</button>
<button type="button" id="edit">Edit Previous Entry</button>

<br/>

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

＆＃13;

＆＃13;

＆＃13;