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

Question

我有一系列<div>s，每个<div>s 都有一个颜色名称的ID，例如<div id="white"></div>，它加载一个音频文件并用从ajax 调用收集的艺术家和曲目标题填充几个标题标签，当div 是点击了

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

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

$("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>

Answer 2

是的，你可以。您必须同时重构 html 和 js。 在 HTML 中，您必须替换具有 id 的静态 div。取而代之的是，使用将附加所有歌曲的容器。

在 JS 中，为每首歌曲创建 DOM 元素，并将其附加到歌曲容器中。之前，请确保所有元素都具有带有歌曲特定数据的“单击”事件处理程序。利用“绑定”

HTML

  <div class="songs"></div>

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

JS

myUrl='http://meyecare.herokuapp.com/api/v1/songs';
$(window).load(function(){
  $.ajax({ 
    url: myUrl,
    type: 'GET',
    dataType: 'jsonp',
    success: function(data) {
      $.each(data, function(index,item){
        var element = $( "<div id='" + item.color + "'></p>" );
        element.on('click', function(){
          $("#song").attr('src',this.songSrc);
          $("h2").html(this.title);
          $("h3").html(this.artist);
        }.bind(item)); 
        element.appendTo(".songs");    
      }); 
    }, 
    error: function(){
      console.log('Shnope!');
    },
  });
});

Answer 3

我不完全确定你想要什么，但这应该会让你朝着正确的方向前进。

HTML

<div id="content">
  <audio id="song" preload="none"></audio>
</div>
<div class="songs"></div>

然后使用 Javascript/jQuery

var html = '';
//Create a div for each fetched song
$.each(data, function(index,item){
  html += '<div class="song" data-song-id="'+index+'" data-artist="'+item.artist+'" data-src="'+item.songSrc+'"></div>';
});
// and add them to the div element with the class songs
$('.songs').html(html);

//Listen to clicks on all divs with the class song
$('.songs').on('click', '.song' function(e){
  var $this = $(this);
  var songId = $this.data('song-id');
  var artist = $this.data('artist');
  var src = $this.data('src');
  $("#song").attr('src',src);
})