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

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