Question

这个奇怪的错误让我半小时烦恼。我正在动态尝试仅使用JavaScript应用滑块。知道为什么会发生这种情况吗？我可以在SO上找到其他问题，但无法理解解决方案。我是JS的新手，非常感谢有人能用非专业术语解释我的事情。这是我的代码。

MARKUP

<!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.

提前致谢。

Answer 1

这里有几个问题：

document.body.appendChild(ogImg);是错的。 ogImg是nodeList。你不能直接将nodeList附加到正文中它已经存在于DOM中（你刚刚使用document.getElementsByClassName("og-fullimg");得到它。
您正在使用$(document).ready()等待调用.bxSlider（），但不使用它来调用document.getElementsByClassName()。我的猜测是你的代码运行得太快了。如果是这种情况，那么只需将所有代码放在.ready()处理程序中。
当你将普通的javascript转换为jQuery时，你正在使用普通javascript和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
    });
});

无法执行＆＃39; appendChild＆＃39; on＆＃39;节点＆＃39;：新的子元素为空

1 个答案: