我构建了一个表单,用数组中的数据填充字段。
我有 2 个按钮,一个将使用 Ajax“发布”- 提交,另一个我试图跳到数组中的下一个对象 - 跳过。
我不知道如何让跳过按钮起作用。我有 found允许您跳到下一条记录的代码,当它只显示一条记录时,但是我有很多记录要添加到 div,所以需要其他东西。
如何跳到数组中的下一个对象?
这是我的代码的 JSfiddle:http://jsfiddle.net/8vf4rs1w/
这里是代码的简化代码。我有大约 20 个输入框我也在添加数据。
<form>
<h1>Record: #<div id="record_id"></div></h1><h5>Date Added: <div id="date_added"></div></h5><br/>
<div class="form-group">
<label for="est_name">Name:</label>
<input type="text" class="form-control" id="est_name" placeholder="Est Name" disabled>
</div>
<div class="btn-group">
<button type="submit" class="btn btn-primary">Verify</button>
<button type="button" id="skip" class="btn btn-secondary">Skip</button>
</div>
</form>
获取JSON
$(document).ready(function(){
$.getJSON('getJSON.php', { get_param: 'name' }, function (data) {
console.log(data)
var index = 0;
var record_id = data[index].id;
var est_name = data[index].name;
var date_added = data[0].reg_date;
$('#record_id').text(record_id);
$('#date_added').text(date_added);
$('#est_name').val($('#est_name').val() + est_name);
});
});
JSON
[ 0: {id: "1", name: "name1", locale: "locale1" }
1: {id: "2", name: "name2", locale: "locale2" }
2: {id: "3", name: "name3", locale: "locale3" } ]
最佳答案
要滚动记录数组,您必须将数组和索引存储在更高的范围内,并在单击跳过按钮时递增索引,如下所示:
$(document).ready(function(){
// The variables that need to be remembered throughout the app
var index = 0;
var records = [];
// Function to set form values
function displayRecord(){
var record = records[index];
$('#record_id').text(record.id);
$('#date_added').text(record.reg_date);
$('#est_name').val(record.name);
}
// Increment index when the skip button is clicked and display data
document.getElementById('skip').addEventListener('click', function(){
index++;
displayRecord();
});
$.getJSON(/**/
records = data;
displayRecord();
/**/);
});
关于javascript - 跳到 JSON 数组中的下一个对象并填充输入框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52822464/