我可以更改循環中的索引嗎？

我有一個系列的每個<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

我可以更改循環中的索引嗎？

回答

相關問題