javascript - 使用 jquery 在循环中为 设置数据属性

Question

我已经为此苦苦挣扎了一天左右，我对 Java 脚本还很陌生，并为我的最终项目构建了我的第一个图形用户界面，以达到我的资格。

我正在尝试构建一个音乐播放网络应用。

我坚持的部分是当我执行搜索时，我的 jquery 生成一个新的 ul 元素，其中包含歌曲标题。

我想做的是让 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 获取了相同的数据属性，

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

代码的问题是

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