Question

我有一张使用Longtail Video的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。我查了为什么在Longtail的页面上失败了，他们说每个都需要一个独特的div id。我意识到这是一个问题，因为我正在生成div onclick。

如何动态更改每个视频的div ID？

Answer 1

您可以使用全局计数器：

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

如何在javascript中动态检查和增加div id？

1 个答案: