将值分配给哈希中的特定输入

Question

现在，我正在使用iTunes搜索API，并尝试从专辑的曲目列表的键/值对中提取数据并将其插入特定的文本输入中。 我能够在一个表中完成此操作，但是由于当前应用程序的设置方式，它现在要求将输入嵌套在一对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(/-([az])/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> 

Answer 1

在错误的函数中输入了“ 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(/-([az])/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>