1

私の現在のスクリプトは少し壊れています。表のリンクをクリックすると、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>
4

2 に答える 2

1

これはうまくいくようです：

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-27T14:40:02.920 に答える
0

試す

$("#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-27T14:35:36.877 に答える