如何添加与我的按钮同步的多个字段？

Question

我的代码符合我的要求。但是，我希望添加多个字段，并且可以在按下按钮时进行编辑。

例如：

1. 添加属性按​​钮：显示Property_1_name，Property_1_address，Property_1_city等的字段。按下添加属性按​​钮时，它显示Property_2_name，Property_2_address，Property_2_city。当然，每次按下按钮时，属性编号都会增加。
2. 编辑上一个属性：这是我遇到问题的地方。它适用于单个字段，但是当我添加多个字段时，它不起作用。它不维护数据。我希望能够用一个来编辑多个字段。

提前致谢。

var input, inputCount = 0;

function newInput() {
  $('#box > input').hide();
  inputCount++;
  input = $('<input data-id="'+inputCount+'"type="text" name="prop_'+inputCount+'_name" placeholder="Property '+inputCount+' Name">')

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.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

只需将输入设为div而不是单个输入。

var name, address, city, input, inputCount = 0;

function newInput() {
  $('#box > div').hide();
  inputCount++;
input=$('<div data-id="'+inputCount+'" id=input'+inputCount+'></div>').appendTo('#box');
  name= $('<input type="text" name="prop_'+inputCount+'_name" placeholder="Property '+inputCount+' Name">').appendTo(input);
address=$('<input type="text" name="prop_'+inputCount+'_address" placeholder="Property '+inputCount+' Address">').appendTo(input);
city=$('<input type="text" name="prop_'+inputCount+'_city" placeholder="Property '+inputCount+' City">').appendTo(input);
}

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

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

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.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/>