Question

你需要一点点这个脚本，它可以很好地播放 GETSONG.php 文件中的MP3文件，但我需要发布一个值（歌曲ID ）在播放mp3时返回 getsong.php 文件，我在使用它时遇到一些麻烦，我需要使用 OnClick 链接。当我点击此链接时，它会尝试更改歌曲，但看起来 id 的值不会传递。

例如，我需要从 OnClick 传递的值为 id = 101

这是我的链接：

<a href="javascript:void(0);" onclick="my_string('id=101')" > Next Mp3</a>

这是我的javascript：

<script type="text/javascript">
var my_string
$(document).ready(function(){

readMP3('test.mp3');// play one mp3 if document is loaded

my_string = function(string_play) {
     dataString_id = string_play;
 readMP3($(this).val(dataString_id));

return true;
}
////////////////////////////////////////
function readMP3(_src){
 $("#jquery_jplayer_1").jPlayer("destroy");

 $("#jquery_jplayer_1").jPlayer({
    ready: function () {
        var data = $.ajax({
            type:'POST',
          url: "getsong.php",
          data: {'ui': _src },
          data_value: {'ui': _src },
          async: false
         }).responseText;

        var string = data.split('|');
        $(this).jPlayer("setMedia", {
            mp3: string[0]
        }).jPlayer("play");

        $('#artist').html(string[1]);
        $('#songname').html(string[2]);
    },
    ended: function (event) {  
        var data = $.ajax({
            type:'POST',
          url: "getsong.php",
          data: {'ui': _src },
          data_value: {'ui': _src },
          async: false
         }).responseText;

        var string = data.split('|');
        $(this).jPlayer("setMedia", {
            mp3: string[0]
        }).jPlayer("play");

        $('#artist').html(string[1]);
        $('#songname').html(string[2]);
    },
    swfPath: "js",
    supplied: "mp3"
}); 

}
})
</script>

请帮助，谢谢。

Answer 1

似乎你正在使用jQuery，我会使用数据属性捕获id，这非常方便，点击处理程序如下：

首次加载时添加html时绑定的示例：

<强> HTML：

<a href="#" class="next-mp3" data-id="101">Next Mp3</a>

<强> JavaScript的：

$(document).ready(function(){

    // your code here...
    // readMP3('test.mp3'); 

    // Click handler for next songs
    $('.next-mp3').click(function(e) {
        e.preventDefault();

        // using $(this).data("id"); will return 101 or any other value

        alert("my next mp3 id: " + $(this).data("id"));

        // your code here...
        // readMP3($(this).data("id"));

    });
});

为了简单起见，删除了部分代码，并根据需要添加它们。

以下是JsFiddle的实际操作： http://jsfiddle.net/9gCW2/5/

动态添加html时（页面加载后）绑定的示例：

<强> HTML：

<a href="#" class="next-mp3" data-id="101">This link will work only after 3 seconds..</a>

<p>Above link will work after 3 seconds..</p>

<强> JavaScript的：

$(document).ready(function(){

    // Adding some dummy data after 3 seconds
    setTimeout(function() {

        // Dynamically added link
        $('<a href="#" class="next-mp3" data-id="102">Link 2</a>').insertAfter('p');

        // Binding click handlers
        $(document).on('click', '.next-mp3', function(e) {
            e.preventDefault();

            alert("link id: " + $(this).data("id"));
        });

    }, 3000);

});

以下是JsFiddle的实际操作： http://jsfiddle.net/9gCW2/4/

JPlayer - 从OnClick链接播放mp3文件

1 个答案: