Question

真正进入javascript并环顾一些模式。我遇到的就是模块模式。它似乎是一个很好的方法来考虑功能的chucks所以我继续尝试用jQuery实现它。我碰到了一个障碍。请考虑以下代码

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>index</title>        
        <script type="text/javascript" charset="utf-8" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){

                var TestClass2 = (function(){
                    var someDiv;            
                    return {
                        thisTest: function ()
                        {
                               someDiv = document.createElement("div");
                                   $(someDiv).append("#index");
                                   $(someDiv).html("hello");
                                   $(someDiv).addClass("test_class");
                        }
                    }
                })();

                TestClass2.thisTest();          

            });
        </script>

    </head>

    <body id="index" onload="">

        <div id="name">
            this is content
        </div>

    </body>
</html>

上面的代码警告div的html内容，然后添加一个类。这些都使用jQuery方法。问题是.html（）方法工作正常，但我无法添加类。没有错误结果，并且没有添加类。这里发生了什么？为什么班级没有被添加到div？

Answer 1

啊，既然您已经更新了问题，我可以更好地回答您的问题。考虑到你想要在已经存在的#index中移动新创建的元素，你应该将append更改为appendTo。

$(document).ready(function() {

var TestClass2 = (function() {
    var someDiv = $("#name");
    return {
        thisTest: function() {
            someDiv = document.createElement("div");
            $(someDiv)
                .html("hello")
                .addClass("test_class")
                .appendTo("#index");
        }
    }
})();

TestClass2.thisTest();

});

希望这有帮助！

Answer 2

我复制并粘贴了您的代码，它对我有用。

确保您不是简单地查看源代码以查看该类是否已应用，因为这样做只会向您显示从服务器发送的HTML - 任何通过JavaScript发生的DOM更新都不会被反映。

要查看实时DOM，请使用Firebug或WebKit的Inspector等工具（内置于Safari和Chrome中）。

Answer 3

您的代码效果很好！ http://jsfiddle.net/lmcculley/p3fDX/

在模块模式中访问jQuery对象

3 个答案: