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 function的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>

如果我运行此代码，我会得到： Uncaught ReferenceError: band is not defined

我还尝试使用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 (Not Found)

有谁知道如何修复audioPlayer() function问题？如果您需要更多信息，请与我们联系。提前致谢

Answer 1

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

还有一个click事件监听器，它在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);
});

Answer 2

删除li标签上的onClick侦听器。相反，在jQuery中，找到乐队，专辑和曲目名称并调用该函数。像这样：

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

var band = $(this).data("band");
var album = $(this).data("album");
var track = $(this).data("track");
audioPlayer(band, album, track);
});

并在li上添加数据属性：

<li class="song" data-band="test band" data-album="test album" data-track="test track"></li>

Answer 3

看起来你的问题与OnClick功能有关：

请尝试更改：

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

要：

  <li class="song" onclick="audioPlayer(\'' + bandname + ','+ albumName +','+ Track + \')"></li>

我不确定这是否是唯一的问题，但是如果它是你应该用正确的DOM方法做到这一点。

var liElement = document.createElement('li');
liElement.addClass("song");
liElement.addEventListener('click', function(){
    audioPlayer(song.band,song.name,song.track);
});

document.body.appendChild(liElement);

Answer 4

在这里，你的

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

不起作用，理由是拼写错误。

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

无效，因为您未指定范围内的乐队，专辑，曲目。如果您正在使用＆＃39; onclick＆＃39;你将不需要jquery部分。在你的li标签。

li onClick功能不起作用

4 个答案: