我的代码按照我想要的方式工作。但是,我想有多个字段添加,并能够在按下按钮时进行编辑。
例如:
- 添加属性按钮:显示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/>
让它成为一个有输入的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/>