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);
    });
});

在music.js中，调用audioPlayer function ：

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得到： 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

onlick="javascript:audioPlayer('Band name', 'Album name', 'Track name');" li内的代码设置为提供这些参数，但是拼写不正确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);
});

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);
});});

将无法使用，因为您没有在范围内指定乐队，专辑，曲目。 如果在li标记中使用“ onclick”，则不需要jquery部分。