Question

我在这里有一个小网站模型：http://designsweeter.com/live/tg/

我正在使用jPlayer HTML5音频/视频。问题是它在wordpress循环中，当你点击底部循环时，顶部的一个也开始，反之亦然。如何确保每个jPlayer播放自己的音频歌曲？

播放和暂停来自此片段： $（“＃button .button”）。bind（'mousedown'，function（）{ $（this）.bind（'mouseleave'，function（）{ $（本）.unbind（ '鼠标离开'）; 的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并为每个帖子ID设置一个变量，默认情况下是在Wordpress中。但是如何将帖子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

Answer 1

好吧，你可以将click函数绑定到一个类，并且在函数中你可以为id（或其他）获取$（this）变量。

e.g。

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

在页面上同时有两个jPlayers。问题

1 个答案: