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

Question

现在我正在使用 iTunes 搜索 API 并尝试从专辑曲目列表的 key/value 对中提取数据并将它们插入到特定的文本输入中。我能够在 table 中完成，但由于应用程序当前的设置方式，它现在要求将输入嵌套在一对 div 中。

值分配在对象的键名称与数据名称属性匹配并插入该特定值的情况下起作用。对象的对通过 .track-form div 中输入的索引进行迭代。出于某种原因，迭代器似乎在第二个 key/value 处停止。相反，它应该按照 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

你的 "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>

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

Assigning values to specific inputs from a hash

html

javascript

hash

jquery

key-value