Question

我有一个开启/关闭按钮，我从this tutorial获取并实现了我的jPlayer页面上的按钮。

正如您在教程中看到的那样，按钮有两种状态：按下和未压制
我使用了jquery文件在我的页面上实现了按钮修改过的玩家。

如果我尝试在index.html中实现它，它会变为按下但不会播放，如果我在jQuery中实现它不会改变为按下但会播放。

这是我在metroplayer.js内的代码：

$(document).ready(function(){
            $('#button').on('click', function(){
                $(this).toggleClass('on');
            });
        });

(function($){
    $.fn.extend({


        metroPlayer: function(options) {

            var defaults = {

            }

            var options =  $.extend(defaults, options);

            return this.each(function() {
                obj = $(this);
                o = options;

                $template = $('<div id="metro-wrapper">'+
                '<div id="metro-left-overlay"></div>'+
                '<div id="jp_container_N" class="">'+
                '<div id="jquery_jplayer_N" class="jp-jplayer"></div>'+
                '<div class="jp-gui">'+
                '<div class="jp-interface">'+
                '<div id="metro-left">'+
                '<div id="metro-controls">'+
                '<ul>'+
                //'<li id="metro-prev" class="jp-prev"><img src="img/prev.png" /></li>'+
                '<section><a id="button" class="onoffbutton jp-play" href="#">&#xF011;</a>'+
                '<span></span>'+
                '</section>'+

阻止按钮以“按下”模式显示的代码有什么问题？

这是我的播放器page。

Answer 1

只需在按钮元素中添加css类，就不会触发jPlayer元素开始播放。尝试在点击事件功能中添加：

if( $(this).hasClass("on") ){
    $(yourplayerid).jPlayer( "play" );
} else {
    $(yourplayerid).jPlayer( "stop" );
}

来源： http://www.jplayer.org/latest/developer-guide/#jPlayer-play

Answer 2

您尚未在点击事件中实施实际的jPlayer( "play" );。我想你想做的是

$('#button').on('click', function(){
    $(this).toggleClass('on');
    $musicPlayer.jPlayer({ //whatever json you want })("play");
});

或类似的东西。这意味着您必须将此事件绑定移动到AFTER在$musicPlayer上设置后，所以请确保您这样做。

jQuery / CSS按钮无法按预期运行

2 个答案: