web-dev-qa-db-ja.com

「ノード」で「appendChild」を実行できませんでした：新しい子要素がnullです

この奇妙なバグは30分から私を悩ませています。 JavaScriptのみを使用してスライダーを動的に適用しようとしています。なぜこれが私に起こっているのかについて何か考えはありますか？ SOに関する他の質問を見つけることができましたが、解決策を理解できませんでした。私はJSを初めて使用するので、誰かが平易な言葉で説明してくれるとありがたいです。これが私のコードです。

[〜＃〜]マークアップ[〜＃〜]

<!DOCTYPE html>
<html>

<head>
    <title>JS sample test page</title>
    <link rel="stylesheet" type="text/css" href="jquery.bxslider.css">
</head>

<body>
    <div class="og-fullimg"></div>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript" src="jquery.bxslider.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
</body>

</html>

[〜＃〜] javascript [〜＃〜]

// code for thumbnail slider begins
(function() {
    var ogImg = document.getElementsByClassName("og-fullimg");
    alert(ogImg.length);
    var bxSlider = document.createElement("ul"); //created ul
    bxSlider.setAttribute("class", "bxslider"); // gave a class name bxslider.

    for (i = 1; i < 4; i++) {
        var itemsList = document.createElement("li");
        var linkImages = document.createElement("img");
        linkImages.src = "images/bid_" + i + ".jpg";
        itemsList.appendChild(linkImages);
        bxSlider.appendChild(itemsList);
    }

    ogImg[0].appendChild(bxSlider);
    document.body.appendChild(ogImg); //append everything to the body.


    //call the slider.
    $(document).ready(function() {
        $('.bxslider').bxSlider({
            auto: true,
            pager: false,
            adaptiveHeight: true,
            slideWidth: 550
        });
    });

}());
// code for thumbnail slider ends.

前もって感謝します。

javascripthtmlbxslider
7
Thomas Sebastian

ここにいくつかの問題：

  1. document.body.appendChild(ogImg);は間違っています。 ogImgはnodeListです。 nodeListを本文に直接追加することはできず、すでにDOMにあります（document.getElementsByClassName("og-fullimg");で取得できます）。

  2. $(document).ready()を使用して.bxSlider（）の呼び出しを待機していますが、document.getElementsByClassName()の呼び出しには使用していません。私の推測では、コードがすぐに実行されているだけです。その場合は、すべてのコードを.ready()ハンドラー内に配置するだけです。

  3. 単純なJavaScriptをjQueryに切り替えると、単純なJavaScriptとjQueryの非常に奇妙な組み合わせを使用しているため、コードが小さくなり、一貫性が高まります。 jQueryを持っている場合は、jQueryが得意なもの（特に、セレクターやコレクションの操作など）にも使用できます。

これは私が提案するものです：

//create and initialize the slider.
$(document).ready(function() {
    var bxSlider = $("<ul class='bxslider'></ul>"), img;
    for (var i = 1; i < 4; i++) {
        img = new Image();
        img.src = "images/bid_" + i + ".jpg";
        $("<li>").append(img).appendTo(bxSlider);
    }
    bxSlider.appendTo(".og-fullimg");

    bxSlider.bxSlider({
        auto: true,
        pager: false,
        adaptiveHeight: true,
        slideWidth: 550
    });
});
9
jfriend00