將值分配給哈希中的特定輸入

Question

現在我正在使用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>

Answer 1

有你在「我」錯誤的功能 - 它總是返回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>