0

ここに小さなサイトのモックアップがあります: http://designsweeter.com/live/tg/

jPlayer HTML5 オーディオ/ビデオを使用しています。問題は、それがワードプレスのループにあり、下のものをクリックすると上のものも開始し、その逆も同様です。各 jPlayer が独自のオーディオ ソングを確実に再生するにはどうすればよいですか?

再生と一時停止は次のスニペットから行われます: $("#button .button").bind('mousedown', function() { $(this).bind('mouseleave', function() { $(this).unbind ('mouseleave'); onClick(); }); });

$("#button .button").bind('mouseup', function() {
    $(this).unbind('mouseleave');
    onClick();
});


function onClick() {        

    if(status != "play") {
        status = "play";
        $("#button").addClass( "play" );
        player.jPlayer("play");
    } else {
        $('#button .circle').removeClass( "rotate" );
        $("#button").removeClass( "play" );
        status = "pause";
        player.jPlayer("pause");
    }
};

php を使用して、デフォルトで Wordpress にある投稿 ID ごとに変数を設定する必要があると想定しています。しかし、投稿 ID を Javascript に挿入して、#post-1 の再生ボタンをクリックするとその jPlayer オーディオが再生され、#post-2 の再生ボタンを押すとポスト 2 オーディオが再生されるようにするにはどうすればよいですか? . javascript と php が恐ろしく混ざっているように見えますが、何か助けはありますか?

ETA: 新しいアイデア:

// play/pause

$('.button').click(function() {
  $(this).attr('id');
    onClick()
});


function onClick() {        

    if(status != "play") {
        status = "play";
        $(this).attr('id').addClass( "play" );
        player.jPlayer("play");
    } else {
        $(this).attr('id').removeClass( "rotate" );
        $(this).attr('id').removeClass( "play" );
        status = "pause";
        player.jPlayer("pause");
    }
};

http://designsweeter.com/live/tg/wp-content/themes/twentyten-five/js/zen.js

4

1 に答える 1

1

さて、クリック関数をクラスにバインドできます。関数では、id などのために $(this) 変数をチェックできます。

例えば

HTML:

<div class="button" id="button-1">A Button</div>

...

JS:

$('.button').click(function() {
  $(this).attr('id');
  ... play music of id ...
});

編集：

$('.button').click(function() {
    onClick($(this).attr('id'));
});


function onClick(id) {        

    if(status != "play") {
        status = "play";
        id.addClass( "play" );
        player.jPlayer("play");
    } else {
        id.removeClass( "rotate" );
        id.removeClass( "play" );
        status = "pause";
        player.jPlayer("pause");
    }
};
于 2011-07-12T22:32:54.090 に答える