0

LongtailVideoのJWプレーヤーを使用したビデオの表があります。テーブル内の画像をクリックすると、ビデオはIDが。のモーダルで起動しmedia modalます。これは私が話しているページです：http：//www.calvaryccm.com/volunteer/featured-ministry。

これはモーダルのJavascriptです：

$(".mediamodal").unbind('click');
$(".mediamodal").click(function () {
    $('.reveal-modal-bg').unbind('click');
    $('.close-reveal-modal').unbind('click');
    $('#mediamodal').remove();
    $('body').append('<div id="mediamodal" class="reveal-modal large" style="width:675px; margin-left:-415px;"><div id="mediaplayer"><script type="text/javascript">SetupMediaPlayer("' + $(this).attr('rel').toLowerCase() + '");</script></div><div id="livepoll_min" style="padding-top:20px;"></div><a class="close-reveal-modal">&#215;</a></div>"');
    $('#mediamodal').reveal({
        animation: 'fadeAndPop',                   //fade, fadeAndPop, none
        animationspeed: 300,                       //how fast animtions are
        closeonbackgroundclick: true,              //if you click background will modal close?
        dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
    });
    $('.reveal-modal-bg').click(function () {
        $("#mediaplayer").remove();
        socket.disconnect();
    });

    $('.close-reveal-modal').click(function () {
        $("#mediaplayer").remove();
        socket.disconnect();
    });

これはデスクトップブラウザではうまく機能しますが、iPadでは機能しません。ロングテールのページでこれが失敗する理由を調べたところ、それぞれに固有のdivIDが必要であるとのことでした。div onclickを生成しているので、これが問題であることに気付きました。

各ビデオのdivIDを動的に変更するにはどうすればよいですか？

4

1 に答える 1

0

グローバルカウンターを使用できます：

var hiImACounter = 0;

$(".mediamodal").unbind('click');
$(".mediamodal").click(function () {
    $('.reveal-modal-bg').unbind('click');
    $('.close-reveal-modal').unbind('click');
    $('#mediamodal' + hiImACounter++).remove(); // <--- increment after the operation
    $('body').append('<div id="mediamodal'+hiImACounter+'" class="reveal-modal large" style="width:675px; margin-left:-415px;"><div id="mediaplayer'+hiImACounter+'"><script type="text/javascript">SetupMediaPlayer("' + $(this).attr('rel').toLowerCase() + '");</script></div><div id="livepoll_min" style="padding-top:20px;"></div><a class="close-reveal-modal">&#215;</a></div>"');
    $('#mediamodal'+hiImACounter).reveal({
        animation: 'fadeAndPop',                   //fade, fadeAndPop, none
        animationspeed: 300,                       //how fast animtions are
        closeonbackgroundclick: true,              //if you click background will modal close?
        dismissmodalclass: 'close-reveal-modal'    //the class of a button or element that will close an open modal
    });
    $('.reveal-modal-bg').click(function () {
        $("#mediaplayer"+hiImACounter).remove();
        socket.disconnect();
    });

    $('.close-reveal-modal').click(function () {
        $("#mediaplayer"+hiImACounter).remove();
        socket.disconnect();
    });
于 2012-11-07T14:46:37.170 に答える