现在我正在使用iTunes搜索API并尝试从专辑的曲目列表的键/值对中提取数据,并将它们插入到特定的文本输入中。我能够在表格中完成this但由于应用程序当前的设置方式,它现在要求输入嵌套在一对div中。
值赋值适用于对象的键名与数据名属性匹配并插入该特定值的位置。对象的对通过.track-form
div中的输入索引进行迭代。由于某种原因,迭代器似乎在第二个键/值处停止。相反,它应该按tracks
对象的顺序填充行输入。
var tracks = [
{discNumber: "01", trackNumber: "01", trackName: "Track 01"},
{discNumber: "01", trackNumber: "02", trackName: "Track 02"},
{discNumber: "01", trackNumber: "03", trackName: "Track 03"},
{discNumber: "01", trackNumber: "04", trackName: "Track 04"},
{discNumber: "01", trackNumber: "05", trackName: "Track 05"}
];
$('.track-form').each(function() {
$(this).find('.track-input').val(function(i) {
var dataName = $(this).data("name"),
camelCasedClass = toCamelCase(dataName);
return tracks[i][camelCasedClass];
});
function toCamelCase(name) {
var camelCase = name.replace(/-([a-z])/g, function(g) {
return g[1].toUpperCase();
});
return camelCase;
}
});
.track-container {
display: inline-block;
}
.track-form:not(:first-of-type) {
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="track-form">
<div class="track-container">
<input type="text" class="track-input" data-name="discNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackName" />
</div>
</div>
<div class="track-form">
<div class="track-container">
<input type="text" class="track-input" data-name="discNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackName" />
</div>
</div>
<div class="track-form">
<div class="track-container">
<input type="text" class="track-input" data-name="discNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackName" />
</div>
</div>
<div class="track-form">
<div class="track-container">
<input type="text" class="track-input" data-name="discNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackName" />
</div>
</div>
<div class="track-form">
<div class="track-container">
<input type="text" class="track-input" data-name="discNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackName" />
</div>
</div>
答案 0 :(得分:0)
在错误的函数中得到你的“i” - 它总是返回0,因为它是容器中的第一个输入。试试这个:
var tracks = [
{discNumber: "01", trackNumber: "01", trackName: "Track 01"},
{discNumber: "01", trackNumber: "02", trackName: "Track 02"},
{discNumber: "01", trackNumber: "03", trackName: "Track 03"},
{discNumber: "01", trackNumber: "04", trackName: "Track 04"},
{discNumber: "01", trackNumber: "05", trackName: "Track 05"}
];
$('.track-form').each(function(i) {
$(this).find('.track-input').val(function() {
var dataName = $(this).data("name"),
camelCasedClass = toCamelCase(dataName);
return tracks[i][camelCasedClass];
});
function toCamelCase(name) {
var camelCase = name.replace(/-([a-z])/g, function(g) {
return g[1].toUpperCase();
});
return camelCase;
}
});
.track-container {
display: inline-block;
}
.track-form:not(:first-of-type) {
margin-top: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="track-form">
<div class="track-container">
<input type="text" class="track-input" data-name="discNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackName" />
</div>
</div>
<div class="track-form">
<div class="track-container">
<input type="text" class="track-input" data-name="discNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackName" />
</div>
</div>
<div class="track-form">
<div class="track-container">
<input type="text" class="track-input" data-name="discNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackName" />
</div>
</div>
<div class="track-form">
<div class="track-container">
<input type="text" class="track-input" data-name="discNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackName" />
</div>
</div>
<div class="track-form">
<div class="track-container">
<input type="text" class="track-input" data-name="discNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackNumber" />
</div>
<div class="track-container">
<input type="text" class="track-input" data-name="trackName" />
</div>
</div>