Question

我有一系列<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和item的索引吗？

以下是我的工作箱：jsbin

相关HTML：

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

Answer 1

为什么不为所有颜色提供一个公共类，然后将对象索引存储在数据属性中。然后你可以只有一个点击事件来填充正确的数据。像这样：

＆＃13;

$("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);
});

＆＃13;

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

＆＃13;

Answer 2

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

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);
})

Answer 3

是的，你可以。你必须重构，html和js。在HTML中，您必须替换具有id的静态div。而不是那样，使用一个容器，其中将附加所有歌曲。

在JS中，为每首歌创建DOM元素，并将其附加到歌曲容器中。以前，确保所有元素都有＆＃34;点击＆＃34;歌曲特定数据的事件处理程序。利用＆＃39; bind＆＃39;

<强> 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!');
    },
  });
});

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

3 个答案: