javascript - li onClick 功能不起作用

Question

我有以下按顺序排列的文件:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/music.js"></script>

在 main.js 中我有以下代码:

$(document).ready(function () {
       $('.song').click(function() {
        $('.footer').show('easeInExpo');
        audioPlayer(band, album, track);
    });
});

在调用 audioPlayer 函数 的 music.js 中:

function audioPlayer(band, album, track) {
 var audio = new Audio; //Class
audio.src = 'music/' + band + '/' + album + '/' + track + '.mp3';
audio.play();
}

调用函数的代码:

<li class="song" onlick="javascript:audioPlayer('Band name', 'Album name', 'Track name');"></li>

如果我运行这段代码，我会得到:未捕获的 ReferenceError:未定义 band

我还尝试使用 main.js 执行以下操作:

$('.song').click(function(band, album, track) {
    $('.footer').show('easeInExpo');
    audioPlayer(band, album, track);
});

这给了我:GET http://localhost/media/music/[object%20Object]/undefined/undefined.mp3 404(未找到)

有谁知道如何解决 audioPlayer() 函数 问题？如果您需要更多信息，请告诉我。提前致谢

Answer 1

li 中的 onlick="javascript:audioPlayer('Band name', 'Album name', 'Track name');" 代码设置为提供这些参数，但它不是拼写正确 onlick 应该是 onclick。

还有一个在 onclick 函数之外执行的点击事件监听器，因此它不会获取任何参数。

---

一种解决方案是将您的 li 更改为使用数据属性:

<li class="song" data-band="Band name" data-album="Album name" data-track="Track name"></li>

然后修改点击监听如下:

$('.song').click(function() {
    $('.footer').show('easeInExpo');
    var data = $(this).data();
    audioPlayer(data.band, data.album, data.track);
});