打開/關閉Div覆蓋

我目前的腳本有點壞。點擊表格中的鏈接成功創建我的div覆蓋。然後我關閉我的div並點擊另一個鏈接，div覆蓋層再次打開關閉按鈕停止工作。打開/關閉Div覆蓋

我猜的問題是，在我使用「replaceWith」之後，DOM不會再識別我的空白div。

任何幫助，將不勝感激。

<table id="tableBin" border="0"> 
    <tr> 
     <th>name</th> 
     <th>description</th> 
    </tr> 
<tbody> 
    <tr> 
     <td><a href="clip/location/A001C012_111129_R1VL.mov">A001C012_111129_R1VL.mov</a></td> 
     <td>Adipiscing elit. Fusce bibendum, leo non.</td> 
    </tr> 
    <tr> 
     <td><a href="clip/location/A001C012_111130_R1VL.mov">A001C012_111130_R1VL.mov</a></td> 
     <td>Consectetur adipiscing elit. Fusce bibendum, leo non.</td> 
    </tr> 
</tbody> 

</table> 

<div id="overlay"> 
    <div id="blackOut" class="hide"> 
     <div id="box" class="hide"> 
      <div id="controls" class="hide"><a href="#"><img border="0" alt="close" width="25px" hieght="25px" src="images/close.png"></a></div> 
     </div> 
    </div> 
</div> 

<script> 
    $("#tableBin a").on("click", function(e) { 
     e.preventDefault(); 
     var url = $(this).attr("href"); 
     var video = jQuery('<embed width="640" height="375" ShowControls=1 src="'+url+'" /></embed>'); 

     $('#blackOut').removeClass("hide").addClass("blackOut"); 
     $('#box').removeClass("hide").addClass("box"); 
     $('#controls').removeClass("hide").addClass("controls"); 
     $('#box').append(video); 
    }); 
</script>

來源

2012-04-27 ENev

這似乎工作：

http://jsfiddle.net/aramk/WesNb/2/

$(document).ready(function() { 
    $("#tableBin a.video").click(function(e) { 
      e.preventDefault(); 
      var url = $(this).attr("href"); 
      var video = $('<embed width="640" height="375" ShowControls=1 src="'+url+'" /></embed>'); 

      $('#overlay').removeClass("hide"); 
      $('#blackOut').removeClass("hide").addClass("blackOut"); 
      $('#box').removeClass("hide").addClass("box"); 
      $('#controls').removeClass("hide").addClass("controls"); 
      $('#video-container').removeClass("hide").html(video); 
     }); 

     $("#close-button").click(function(e) { 
      $('#overlay').addClass("hide"); 
      $('#video-container').addClass("hide").html(""); 
      return false; 
     }); 
});

我不知道，如果你想更換播放視頻或不，所以我添加了一個容器，每次點擊都將其內容替換爲加載的視頻。

此外，您的原始代碼在關閉點擊時替換了所有內容 - 這是非常具有破壞性且無法維護的。改變HTML中的任何內容都意味着改變JS中的所有內容 - 用一個字符串 - 這非常混亂。

來源

2012-04-27 14:40:02

對不起，阿蘭，我搞砸了。 div再次打開，但關閉按鈕停止工作。： -/ – ENev 2012-04-27 14:45:08

嗯，現在呢？ – 2012-04-27 14:57:17

＃關閉按鈕和＃視頻容器的新元素或只是對img和視頻的id？我似乎遇到的問題是$（'＃video-container'）。addClass（「hide」）。html（「」）;正在刪除我的關閉按鈕圖像。 – ENev 2012-04-27 15:26:15

嘗試

$("#box img").on("click", function(e) { 
     $('#overlay').html('<div id="blackOut" class="hide"><div id="box" class="hide"><div id="controls" class="hide"><a href="#"><img border="0" alt="close" width="25px" hieght="25px" src="images/close.png"></a></div></div></div>'); 
    });

代替

來源

2012-04-27 14:35:36

糟糕，我需要再次修正Tte鏈接，但關閉按鈕在第一次後停止工作。 – ENev 2012-04-27 14:43:07

打開/關閉Div覆蓋

回答

相關問題