如何添加與我的按鈕同步的多個字段？

-1

我的代碼是如何工作的。但是，我希望添加多個字段，並且可以在按下按鈕時進行編輯。如何添加與我的按鈕同步的多個字段？

例如：

添加屬性按鈕：顯示Property_1_name，Property_1_address，Property_1_city等領域當按下添加屬性按鈕，它顯示Property_2_name，Property_2_address，Property_2_city。當然，每按一下按鈕，屬性編號就會增加。
編輯上一個屬性：這是我遇到問題的地方。它在單個字段上工作，但是當我添加多個字段時，它不起作用。它不維護數據。我希望能夠像我一樣編輯多個字段。

在此先感謝。

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

來源

2015-06-06 TC Hakeem

哪裏是你的多個字段代碼，它看起來與http://stackoverflow.com/questions/30670978/how-do-i-create-a-button-that相同-allows -a-user-to-traverse-through-recent -d/30671541＃30671541 – depperm

我還沒有做出代碼，那是我卡住的地方。這只是一個例子 –

就使其與輸入而不是單個輸入一個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/>

來源

2015-06-07 01:19:51 depperm

如何添加與我的按鈕同步的多個字段？

回答

相關問題