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部分。