如何在javascript中動態檢查並增加div id的值？

Question

我有一張使用Longtail Video JW播放器的視頻表。當您點擊表格中的圖片時，視頻將以模特身份以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(); 
    });