时间戳

首页 > 解决方案 > 有没有办法将值动态添加到 onclick 函数？

javascript - 有没有办法将值动态添加到 onclick 函数？

问题描述

我有一个音乐播放器，我可以通过将 href 直接链接到 click 函数来下载音频文件。每个音频文件都在一个 li 元素中，只要我保持硬编码，一切都可以正常工作。但是当我将 li 元素和下载链接转换为动态时，我无法再连接点击功能。任何人都可以帮忙吗？这是代码：

// Html 硬编码

<ul id="playlist1" class="hidden m-1 p-0">
<li id="li-items" data-song="the-deal.wav">The Deal<span class="dwn fa fa-download" onclick="downloadFile('/audio/the-deal.wav', 'The Deal')"></span></li>
<li id="li-items" data-song="rise-of-don.mp3">Rise of The Don<span class="dwn fa fa-download" onclick="downloadFile('/media/rise-of-don.mp3', 'Rise of The Don')"></span></li>
</ul>

// 音频库 js

var data1 = [{
          href: "/media/the-deal.wav",
          name: "The Deal",
          song: "the-deal.wav"
      }, {
          href: "/media/rise-of-don.mp3",
          name: "Rise of the Don",
          song: "rise-of-don.mp3"
      }]


// Create li elements
            for (var i = 0; i < data1.length; i++) {
                var t = document.createElement('li');
               t.setAttribute("id","li-items");
               
               
                var ta = document.createElement('span');
                ta.classList.add("dwn","fa","fa-download");
                ta.setAttribute("onclick","downloadFile('url','filename')");  // << This is the line that I'm having trouble with. 'Url' and 'filename' should be added dynamically for each li element. 
                
                t.dataset.song = s.song;
                t.textContent = s.name;
                t.appendChild(ta);

                
                document.getElementById('playlist1').appendChild(t);

    }

// 音频播放器 js - (下载功能):

function downloadFile(url, filename) {
    //Filename download the user-defined name. The URL is the download address
    var link = document.createElement('a');
    link.href = url;
    link.download = filename;
    link.target = '_blank';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    link = null;
}

如果有人可以提供帮助，我将不胜感激。

标签： javascriptjquery

解决方案

我想在这一行

ta.setAttribute("onclick","downloadFile('url','filename')");

您使用字符串作为属性。也许你可以

// ta.setAttribute("data-href", data[i].href)
// ta.setAttribute("value", data[i].name)

// You can also 
ta.dataset.href = data[i].href
ta.dataset.name = data[i].name

ta.addEventListener("click", downloadFile)

然后在downloadFile

function downloadFile(e) {
    fileUrl = e.dataset.href
    fileName = e.dataset.name
    console.log(fileUrl, fileName)
    
    // continue with your actions
}

更多关于数据集的信息——https: //developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

推荐阅读