Question

我开始使用jQuery了。我一直试图将它与我之前存在的一些JavaScript代码混合在一起，所以我不必重写所有内容。我读过许多地方，这是完全可行的。但是，每当我包含任何jQuery行时，标准JavaScript就会停止运行。

以下是一些例子：

<!DOCTYPE html>
<html>
    <head>
        <style>
            #testjquery {
                height: 300px;
                width: 300px;
            }
        </style>
    </head>
    <body>
        <div id="testjquery" onclick="testClick()">This is the stuff.</div>
        <script src='jquery-1.10.2.min.js'></script>
        <script>
            $(document).ready(function() {
                function testClick() {
                    document.getElementById("testjquery").style.background = "blue";
                }
            });
        </script>
    </body>
</html>

这不起作用，当点击时我得到一个未定义的函数错误。

但是，把它放在身体

<body>
    <div id="testjquery">This is the stuff.</div>
    <script src='jquery-1.10.2.min.js'></script>
    <script>
        $(document).ready(function() {
            $("#testjquery").click(function() {
                $(this).css("background", "blue");
            });
        });
    </script>
</body>

正常工作，与标准JavaScript中的等效工具一样。

Answer 1

不要将您的函数包装在DOM ready($(document).ready(function(){)处理程序中。因为它是一个匿名函数，所以testClick()函数有local scope。所以你不能在DOM ready之外调用它}

function testClick() {
    document.getElementById("testjquery").style.background = "blue";
}

阅读What is the scope of variables in JavaScript?

Answer 2

文档准备就绪时运行以下块，并创建一个在匿名函数外部不可见的本地函数testClick()（由function(){创建的函数在第一行）。

$(document).ready(function(){ 
function testClick(){
document.getElementById("testjquery").style.background="blue";
}
});

如果要定义可以直接调用的全局函数，则不应将其放在文档就绪处理程序中。改为将其改为此。

function testClick(){
  document.getElementById("testjquery").style.background="blue";
}

包括jQuery导致标准JavaScript停止运行？

2 个答案: