[英]Set data attribute for <li> in a loop using jquery
我已經為此苦苦掙扎了一天左右,我對 Java 腳本還很陌生,並為我的最終項目構建了我的第一個 gui,以達到我的資格。
我正在嘗試構建一個音樂播放網絡應用程序。
我堅持的部分是當我執行搜索時,我的 jquery 生成一個新的 ul 元素,其中 li 列出了歌曲標題。
我試圖做的是讓 li 保存歌曲獨有的數據屬性(“主要是從后端到歌曲的文件路徑和圖像路徑”)
到目前為止,這是我的代碼。
$("#searchButton").click(() => {
const input = $("#search").val();
const requestURL = "music/" + input.replace(/\s+/g, '%20');
$.ajax({
url: requestURL,
type: "GET",
dataType: "json",
success: (data) => {
if(data){
$('ul,li').remove();
$('<ul class="searchHeader"> </li>').text("Songs").appendTo('#songs');
$('<ul class="albumHeader"> </ul>').text("Albums").appendTo('#albums');
$('<ul class="artistHeader"> </ul>').text("Artist").appendTo('#artist');
$(data).each(function(i) {
$('<li class="results" </li>').text(data[i].songtitle).appendTo('#songsection')
})
--------//this is where i am having issues!!!!! -----
$(".results").each(function (fp){
$(this).attr("data-file", data[fp].filepath);
})
$(".results").click(() => {
loadAudio($(".results").attr("data-file"));
play();
})
var albumArray = [];
for(var i = 0; i < data.length; i++){
if(albumArray.indexOf(data[i].albumtitle) == -1){
albumArray.push(data[i].albumtitle);
}
}
for(var i = 0; i < albumArray.length; i++){
$('<li class="results" onclick=""> </li>').text(albumArray[i]).appendTo('#albumsection');
}
var artistArray = [];
for(var i = 0; i < data.length; i++){
if(artistArray.indexOf(data[i].name) == -1){
artistArray.push(data[i].name);
}
}
for(var i = 0; i < artistArray.length; i++){
$('<li class="results" onclick=""> </ul>').text(artistArray[i]).appendTo('#artistsection');
}
}
}
})
})
正如您可能猜到的,我為每個 li 獲得了相同的數據屬性,
任何幫助將不勝感激。
謝謝
代碼中的問題是
$(".results").click(() => {
loadAudio($(".results").attr("data-file"));
play();
})
在click
處理程序中,其中$(".results")
是所有匹配選擇器的集合,而.attr("data-file")
僅獲取傳遞給jQuery()
的選擇器的第一個值。
您可以使用$(this)
或$(event.target)
來引用調度事件的$(".results")
集合中的當前元素。
loadAudio($(this).attr("data-file"));
play();
傳遞給jQuery()
的 HTML 的關閉標簽。 不需要多個循環。 使用.each()
正確參數
$(function() { var data = [{ songtitle: 0, filepath: 0 }, { songtitle: 1, filepath: 1 }]; $(data).each(function(i, value) { $("<li>", { "class": "results", text: "click " + value.songtitle, attr: { ["data-file"]: value.filepath }, appendTo: "#songsection", on: {click: function(event) { console.log(event.target.dataset.file, $(this)[0].outerHTML); /* // use built-in `event.target.dataset` or jQuery version loadAudio($(event.target).attr("data-file")); play(); */ } } }) }); })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul id="songsection">
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.