0

次の質問のコードを使用して、YouTube ビデオをページに挿入しました。YouTube プレーヤーのサイズをサムネイル サイズから「通常の」サイズに変更する方法

次の html があるとします。

<dl>
<dt>Thoughts of Sacrament</dt>
<dd><div class="placeholder"><img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" /></div><div class="close">x</div><p>There is no purpose to this text, it's just here in order to provide a frame of visual reference while I work upon the code behind this here 'page,' still: I hope you enjoy, uh...looking.</p></dd>
<dt>Sanity falling</dt>
<dd><img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" /></dd>
</dl>

次の jQuery.placeholderは、YouTube ビデオを含む div を削除する必要があると予想しました。

$(document).ready(function(){

    // ...Other code to insert the YouTube...

$("div.close").click(function() {

    $(this).sibling("div").remove();
            // $(this).parent().empty();

});

});

最終的には、元のアニメーションを「反転」してから、YouTube ビデオを元のアニメーションに交換することを目指して.pngいますが、関連する div にアクセスできません。コメントアウトされたコードは機能し、親要素を空にしますが、兄弟にアクセスできないようです.placeholder

どんな助けでも大歓迎です、事前に感謝=)


アップデート:

現在のページはhereで、そのページのコードは以下のとおりです。

    <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>jQuery & YouTube</title>
    <link rel="stylesheet" type="text/css" href="css/demo.css" />

    <script type="text/javascript" src="js/jquery.js"></script>

<!--

    Currently -almost- works
        - unfortunately the 'close' option doesn't care
        if the video's been played or not (and will remove the picture if it's there).
        - the close button also (tries?) to animate the flash object and then drops
        the replacement image in. Looks wrong.

        On updating the page, the image -after closing/removing the video
        is no longer 'clickable'

-->

        <script type="text/javascript">
$(document).ready(function(){

    $(".placeholder img").click(function () {

        var videoID = $(this).attr("id");

        $(this).animate({ 
        width: "445px",
        height: "364px"
        }, 600, function() {

            $(this).replaceWith("<object id=\"" + videoID + "\" class=\"yt\" width=\"425\" height=\"344\"><param name=\"movie\" value=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"autoplay\" value=\"1\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed></object>", function() {$(this).parent().children().find("div .close").toggle()} );
        });
    });

    $("div.close").click(function() {

        var videoID = $(this).parent().find("object").attr("id");

        $(this).parent().children("div .placeholder").animate({
            width: "252px",
            height: "199px"
            }, 600, function() {

                $(this).replaceWith("<div class=\"placeholder\"><img id=\"" + videoID + "\" src=\"img/" + videoID + ".png\" /></div>");
                });
        });

});

        </script>
</head>
<body>
<div id="wrap">

    <div id="head">

        <div id="branding" title="demo page for jQuery issues.">

            <h1>jQuery and YouTube problems</h1>

            <div id="navigation">

                <ul>
                    <li><a href="#">home</a></li>
                    <li><a href="#">videos</a></li>
                    <li><a href="#">dates</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div id="content">

    <dl>
        <dt>Thoughts of Sacrament</dt>
        <dd>
            <div class="placeholder">
                <img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" />
            </div>

            <div class="close">x</div>

            <p>There is no purpose to this text, it's just here in order to provide a frame of visual reference while I work upon the code behind this here 'page,' still: I hope you enjoy, uh...looking.</p>
        </dd>

    <dt>Sanity falling</dt>
        <dd>
            <div class="placeholder">
                <img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" />
            </div>

            <div class="close">x</div>
        </dd>
    </dl>
    </div>
</div>
</body>
</html>

div が多用されていることに気付くでしょう (何らかの理由で DOM の操作が簡単になるのではないかと考えたために使用されました。私が知る限りではそうではありませんでした)。マイヤーモリーセダーホルムに 必要 な 犠牲 を払う.

4

1 に答える 1

0

それで...いくつかの作業と多く試行錯誤と、ここで何が起こっているのかを理解するためのjQueryドキュメントとその他のSOの質問への多くの参照の後、私はアクセスするための特に汚い手段を一緒にハックしました兄弟.placeholder部門。

$(document).ready(function(){

// ...Other code to insert the YouTube...

    $("div.close").click(function() {

        var videoID = $(this).parent().find("object").attr("id");

        $(this).parent().children("div .placeholder").replaceWith("<div class=\"placeholder\"><img id=\"" + videoID + "\" src=\"img/" + videoID + ".png\" /></div>");

    });

});

<div id="content">

<dl>
    <dt>Thoughts of Sacrament</dt>
    <dd>
            <div class="placeholder"><img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" /></div>
            <div class="close">x</div>
            <p>There is no purpose to this text, it's just here in order to provide a frame of visual reference while I work upon the code behind this here 'page,' still: I hope you enjoy, uh...looking.</p>
        </dd>

    <dt>Sanity falling</dt>
    <dd>
            <img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" />
        </dd>
</dl>

</div>

私はこれが何らかの方法でページを開始位置にリセットすることを望んでいまし.png.close.をクリックし.pngて拡大し、YouTube ビデオをもう一度挿入します。

なぜそれが良いアイデアのように思えたのかはわかりませんが、そうでした。悲しいことに、それは機能しません。理由はわかりません。私は... jQueryライブイベント/関数/ものと関係があるかもしれないという予感があります(私はjQueryに本当に慣れていません)が、すべてを一緒に接続する方法はまだわかりません。

私が提起した質問に適用できるより良い回答がたくさんあると思われるので、質問をもう少し開いたままにします。本当に、ほとんど必要があります。

念のため、これは以前の質問の開発であるhtmlため、以下のファイルからコード全体を投稿します。これにより、参加者は誰でも私が行ったことを確認でき、できれば理解が深まらない場合でも理由がわかります。私の意思決定プロセスの。

コード全体:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <title>in the absence of light | ITAOL</title>
    <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />

    <script type="text/javascript" src="js/jquery.js"></script>

        <script type="text/javascript">
$(document).ready(function(){

    $("img").click(function () {

        var videoID = $(this).attr("id");

        $(this).animate({ 
        width: "445px",
        height: "364px"
        }, 600, function() {

            $(this).replaceWith("<object id=\"" + videoID + "\" class=\"yt\" width=\"425\" height=\"344\"><param name=\"movie\" value=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"autoplay\" value=\"1\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/" + videoID + "&hl=en&fs=1&color1=0x3a3a3a&color2=0x999999\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\"425\" height=\"344\"></embed></object>");
        });
    });

    $("div.close").click(function() {

        var videoID = $(this).parent().find("object").attr("id");

        $(this).parent().children("div .placeholder").replaceWith("<div class=\"placeholder\"><img id=\"" + videoID + "\" src=\"img/" + videoID + ".png\" /></div>");

    });

});

        </script>

</head>

<body>

<div id="wrap">

    <div id="head">

        <div id="branding" title="In the Absence of Light.">

            <h1 title="In the Absence of Light">In The Absence of Light</h1>

            <div id="navigation">

                <ul>
                    <li><a href="#">home</a></li>
                    <li><a href="#">videos</a></li>
                    <li><a href="#">dates</a></li>
                </ul>

            </div>

        </div>

    </div>

    <div id="content">

    <dl>
        <dt>Thoughts of Sacrament</dt>
        <dd>
            <div class="placeholder">
                <img src="img/H5ZEYFgmfYo.png" id="H5ZEYFgmfYo" />
            </div>

            <div class="close">x</div>

            <p>There is no purpose to this text, it's just here in order to provide a frame of visual reference while I work upon the code behind this here 'page,' still: I hope you enjoy, uh...looking.</p>
        </dd>

    <dt>Sanity falling</dt>
        <dd>
            <div class="placeholder">
                <img src="img/2ieLb3RAblA.png" id="2ieLb3RAblA" />
            </div>

            <div class="close">x</div>
        </dd>

    </dl>

    </div>

    <div id="foot">

    </div>


</div>

</body>

</html>
于 2009-08-23T13:45:29.947 に答える