Javascript 为<；设置数据属性；李>；在使用jquery的循环中

我已经为此挣扎了一天左右， 我对java脚本非常陌生，为了获得资格证书，我为最终项目构建了第一个gui

我正在尝试建立一个音乐播放网络应用程序

我一直坚持的一点是，当我执行搜索时，我的jquery生成了一个新的ul元素，并对歌曲标题进行了li-lising

我想做的是让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');
         }
        }
    } 
  })
})

$（“#搜索按钮”）。单击（（）=>{
常量输入=$（“#搜索”）.val（）；
const requestURL=“music/”+input.replace（/\s+/g，“%20”）；
$.ajax({
url:requestURL，
键入：“获取”，
数据类型：“json”，
成功：（数据）=>{
如果（数据）{
$（'ul，li'）。删除（）；
$（'ul class=“searchHeader”>）。文本（“歌曲”）。附录（“歌曲”）；
$（'ul class=“albumHeader”>）.text（“Albums”）.appendTo（“Albums”）；
$（'ul class=“artistHeader”>）.text（“艺术家”）.appendTo（“艺术家”）；
$（数据）。每个功能（i）{
$（'代码处的问题是

$(".results").click(() => {
  loadAudio($(".results").attr("data-file"));
  play();
})

在
中单击
处理程序，其中
$（“.results”）
是所有匹配选择器的集合，
.attr（“数据文件”）
仅获取传递给
jQuery（）
的选择器的第一个值

您可以使用
$（this）
或
$（event.target）
引用
$（“.results”）
集合中调度事件的当前元素

loadAudio($(this).attr("data-file"));
play();

关闭传递给
jQuery（）
的HTML标记。不需要多个循环。请使用
的正确参数。每个（）


$（函数（）{
风险值数据=[{
歌曲名称：0，
文件路径：0
}, {
歌曲名称：1，
文件路径：1
}];
$（数据）。每个（函数（i，值）{
$（“
”{
“类”：“结果”，
文本：“单击”+value.songtile，
属性：{
[“数据文件”]：value.filepath
},
附件：“#宋节”，
on:{单击：函数（事件）{
log（event.target.dataset.file，$（this）[0].outerHTML）；
/*
//使用内置的`event.target.dataset`或jQuery版本
loadAudio（$（event.target）.attr（“数据文件”）；
play（）；
*/
}
}
})
});
})

欢迎使用堆栈溢出。请看一看：。感谢这一点，它使我的代码更加优雅，但我仍然有相同的问题每个li标记的数据属性设置为相同的文件路径。@Lewis“但我仍然有相同的问题每个li标记的数据属性设置为相同的文件路径。”你能创建一个stacksnippets来演示吗？看，我能，但我的所有数据都是从我的后端拉进来的，我可以在stack snippet中复制。你提供的代码非常适合显示歌曲标题，但它将数据属性设置为相同的文件路径