Наличие двух jPlayers на странице одновременно. проблема - PullRequest
Новая
       1

Наличие двух jPlayers на странице одновременно. проблема

0 голосов
/ 13 июля 2011

У меня есть небольшой макет сайта: http://designsweeter.com/live/tg/

Я использую аудио / видео jPlayer HTML5.Проблема в том, что он находится в цикле wordpress, и когда вы щелкаете нижнюю, запускается и верхняя, и наоборот.Как я могу убедиться, что каждый 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 по умолчанию.Но как я могу вставить идентификатор записи в 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

1 Ответ

1 голос
/ 13 июля 2011

Ну, вы можете привязать функцию щелчка к классу, а в функции вы можете проверить переменную $ (this) для идентификатора или чего-то еще.

, например

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