javascript - 我可以在循环中更改索引吗？

Question

我有一系列<div>每个都有一个颜色名称的 id，例如 <div id="white"></div>加载一个音频文件，并用单击 div 时从 ajax 调用收集的艺术家和轨道标题填充几个标题标签

HTML

<audio id="song" preload="none">
</audio>
<div id="white"></div>
<div id="pink"></div>
<div id="play" onclick="document.getElementById('song').play()"></div>
<div>
  <h2 id="title"></h2>
  <h3 id="artist"></h3>
</div>`  

Javascript

$("#white").click(function(){
    $("#song").attr('src',data[0].songSrc);
    $("h2").html(data[0].title)
    $("h3").html(data[0].artist)
}); 

$("#pink").click(function(){
    $("#song").attr('src',data[1].songSrc);
    $("h2").html(data[1].title)
    $("h3").html(data[1].artist)
}); 

我可以使用 for 循环或 $.each而不是重复相同的代码并手动更改 19 个项目中每个项目的 div id 和项目索引？

这是我正在解决这个问题的垃圾箱:jsbin

相关 HTML:

<div id="play" onclick="document.getElementById('song').play()"></div>

Answer 1

为什么不给所有颜色一个公共(public)类，然后将对象索引存储在数据属性中。然后您只需单击一次即可填充正确的数据。像这样的事情:

$("div.color").click(function(){
  var index = $(this).data('src');
  $("#song").attr('src',data[index].songSrc);
  $("h2").html(data[index].title);
  $("h3").html(data[index].artist);
}); 

<div id="white" class="color" data-src="0"></div>
<div id="pink" class="color" data-src="1"></div>