ページ上に同時に2つのjPlayersを持つ。問題

Question

ここで少しのサイトモックアップがあります：http://designsweeter.com/live/tg/

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

遊びや一時停止がこのスニペットから来ている：。 $（ "＃ボタン.button"）バインド（ 'マウスダウン'、機能（）{ $（この）.bind（ 'mouseleave'、機能（）{ $（この）.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、のための変数を使用する必要がありますと仮定しています。私は＃の後の1で再生ボタンをクリックしたとき、それはそのjPlayerオーディオを果たしている、と私は＃の後の2の再生ボタンを打ったとき、それはポスト2オーディオを果たしているように、しかし、どのように私には、JavaScriptにポストIDを挿入することができます。 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

Answer 1

さて、あなたはクラスにクリック機能をバインドすることができ、かつ機能であなたはIDまたは何か他のもののために、$（この）変数をchechすることができます。

HTML：

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

...

JS：

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

EDIT：

$('.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"); 
    } 
};