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

How do I add multiple fields that are in sync with my buttons?

本文关键字：同步 字段 按钮 我的 何添加 添加      更新时间：2023-09-26

我的代码按照我想要的方式工作。但是，我想有多个字段添加，并能够在按下按钮时进行编辑。

例如:

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

让它成为一个有输入的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/>

相关文章：