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

我有一个系列的每个<div> s的颜色名称，如<div id="white"></div>加载的音频文件，并填写了几个标题标签与艺术家和曲目标题来自一个Ajax调用聚集在div点击我可以更改循环中的索引吗？

时的ID 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而不是重复相同的代码和手动更改DIV这19个项目的每一个的ID和项目索引？

这里是我的bin其中，我的工作了这一点：jsbin

相关HTML：

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

来源

2015-12-05 Spencer Bonez

我猜你是从根本上就错了！ '：（' –

@Praveen，你可以更具体吗？ –

这就是我仍然试图理解的。':(' –

你为什么不给你所有的色彩共同类，然后存储对象指数在数据属性中。然后，您只需单击一个事件即可填充正确的数据。事情是这样的：

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

来源

2015-12-05 23:33:34 billynoah

得到它谢谢你！我想我将不得不添加一个普遍的类，但其他人都陷入了困境 –

我不完全知道你想要什么，但这个应该让你在正确的方向。

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

来源

2015-12-05 23:18:29 Andy

我认为OP想要增加用于访问'data'数组的索引。你将总是使用该数组中的同一项 – bhspencer

$ .each函数将迭代响应数据和增量索引 – Andy

@Andy我更新了代码问题，希望它有助于澄清。我在问，基本上我想用一个循环（如果可能的话），所以我不必再重复。点击页面上每个19格的功能 –

是的，可以。你必须重构html和js。在HTML中，您必须替换静态div，即具有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>

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

来源

2015-12-05 23:32:55

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

回答

相关问题