V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
serenader
V2EX  ›  JavaScript

新手学JavaScript碰到一个问题,恳请各位大神有空帮忙看看

  •  
  •   serenader · 2013-12-03 19:02:07 +08:00 · 3324 次点击
    这是一个创建于 4013 天前的主题,其中的信息可能已经有所发展或是发生改变。
    自己学 JavaScript 有一段时间了,想写点东西练练手。于是想利用 jPlayer ( http://jplayer.org) 写一个音乐播放器,带列表的。
    在官网看了 dev guide 还是有些不明白。我的目的是利用 jPlayer 里面的事件,当 loadeddata 事件触发之后执行某个函数。
    http://jplayer.org/latest/developer-guide/#jPlayer-event-use 这是 jPlayer 事件的使用方法。
    我在页面里面插入了外部 js 文件,放在了 body 的最后面。 js 代码如下:

    window.onload = function () {
    $.jPlayer({
    ready: function() {
    alert("a");
    }
    })

    我先利用 ready 事件作为测试。但是也是没有效果。后来在官网里面的 demo ( http://jplayer.org/latest/demo-01/ )里面发现了单首歌曲的页面是这样添加歌曲信息的:

    $(document).ready(function(){

    $("#jquery_jplayer_1").jPlayer({
    ready: function (event) {
    $(this).jPlayer("setMedia", {
    m4a:"http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",
    oga:"http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg"
    });
    },
    swfPath: "../js",
    supplied: "m4a, oga",
    wmode: "window",
    smoothPlayBar: true,
    keyEnabled: true
    });

    $("#jplayer_inspector").jPlayerInspector({jPlayer:$("#jquery_jplayer_1")});
    });

    于是我稍微修改了一下:

    $("#jquery_jplayer_1").jPlayer({
    ready: function (event) {
    alert("a");
    },
    });

    然后插入到我写的页面,但是还是不行。不过如果是单首歌曲的页面的话又可以。带播放列表的就总是不行。我想请教一下各位大神,究竟怎样才能利用 ready(或者 loadeddata) 事件执行相应的 function 呢?
    其实我是想通过 loadeddata 这个时间触发之后获取正在播放的歌曲的歌曲名,然后把文本赋予给一个自己建的div。之前只想到通过获取正在播放的歌曲的 class 或 id 然后再把文本赋予给div。但是这样创建的文本并不能根据歌曲的切换然后正确地显示歌曲名,只能显示第一首歌曲的歌曲名。所以才有了想通过 loadeddata 这个事件来动态地执行文本的获取。
    各位大神如果有更好的办法的话 麻烦告知一下,小弟感激不尽!
    4 条回复    1970-01-01 08:00:00 +08:00
    bombless
        1
    bombless  
       2013-12-03 22:12:54 +08:00   ❤️ 1
    你需要花点时间学一下 jQuery
    如果没有基础的话普通人可能需要花3天时间了解个大概

    jQuery 可以用 $(function_to_setup); 或者 $(document).ready(function_to_setup); 来执行一个函数例如 function_to_setup ,在这里面操作浏览器 DOM 。像你那样的话假如你的脚本在相应的 DOM 之前并且 script 标签没有加上 defer 属性,那么 $("#jquery_jplayer_1").length 是0,取不到任何 DOM 。即使修改了 script 标签的位置或者给它加上 defer 属性,你的播放器的 jQuery.fn.jPlayer 函数也可能因为 DOM 没有准备好而出错。

    在阅读一本 jQuery 指导书之前也许你需要学习一下《 JavaScript 语言精粹》以了解 JavaScript ,这门语言可能不如你想象的那么简单。

    本着授人以鱼不如授人以渔的精神,就不直接说怎么改了。
    如果你需要一个短平快的解决方案,就当我没说……
    serenader
        2
    serenader  
    OP
       2013-12-03 22:20:05 +08:00
    @bombless 感谢您的指点。
    看来我还是得先放下这些比较复杂的,先学好基础的JavaScript和jQuery。
    cyr1l
        3
    cyr1l  
       2013-12-03 22:55:57 +08:00   ❤️ 1
    @serenader

    官方文档里这么写的: ready
    Function : (Default: undefined) : Defines an event handler function that is bound to the $.jPlayer.event.ready event. To reference the current instance, use $(this). Generally, it is recommended to use a function here to at least $(this).jPlayer("setMedia",media) the instance to a valid url ready for use.

    注意最后一句话, 使用这个事件的时候, 注意至少需要 setMedia , 并且赋予一个可用的 mp3 地址。所以不设置mp3 地址, 是没法触发 ready 事件的。
    serenader
        4
    serenader  
    OP
       2013-12-04 00:44:21 +08:00 via Android
    @cyr1l 感谢指点。自己水平还不够,还是得学好基础再去折腾这些。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2545 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 32ms · UTC 16:00 · PVG 00:00 · LAX 08:00 · JFK 11:00
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.