jQuery 和用户定义函数的范围问题答案

【问题标题】：Scope issue with jQuery and User Defined FunctionjQuery 和用户定义函数的范围问题
【发布时间】：2012-12-17 22:08:31
【问题描述】：

我认为我在尝试调用用户定义的函数时遇到了范围问题。

我的用户定义函数在一个外部文件中，如下：

alert("1");//executes
(function(jQuery){
    alert("2");//executes
    jQuery.fn.slider = function(params) {
    alert("3"); //never hits because the function is never called.
    //code here
    };
})(jQuery);

我尝试使用：

<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function(){
    alert("1-2");//This executes.
});     

jQuery(document).ready(function(){
    jQuery("#slider").slider({//Function doesn't exist error
        slideSize: 5,
    duration: 300,
    photos: []
    });
});    
// ]]></script>

我把那个警报放在那里只是为了看看 jQuery 对象是否存在。我使用 noConflict 是因为我在页面上也有原型代码。

根据我在这个问题https://stackoverflow.com/a/4083362 上读到的内容，我认为我必须这样做：

window.slider = jQuery.fn.beerSlider;

并通过以下方式访问它：

slider("#slider").myPlugin();

myPlugin 是我想要的任何名称？但我确定这是不正确的。

我的滑块的 html 是：

<div id="slider">
    <a href="#"><img src="../images/1.jpg" alt="" border="0" /></a> 
    <a href="#"><img src="../images/2.jpg"alt="" border="0" /></a> 
</div>

谁能帮我解释一下我为什么会遇到问题？

编辑：我首先包含“jquery-1.8.3.min.js”，然后是$.noConflict();。然后我使用原型框架包含外部文件。然后我包含我的用户定义函数并最终调用它。但是，我认为 jQuery 是在我调用我的函数时定义的，因为在我调用我的函数之前，我使用匿名 jQuery 函数来执行 alert("1-2");//this executes

警报的顺序如下：(1, 2, 1-2)

我看到 jsfiddle 工作正常，我试图看看我的代码有什么不同。这可能与我的页面上有原型框架代码的事实有关吗？我正在使用$.noConflict() 并按照这里所说的http://docs.jquery.com/Core/jQuery.noConflict

注意：此函数必须在包含 jQuery javascript 文件之后，但在包含任何其他冲突库之前，以及在实际使用其他冲突库之前调用，以防最后包含 jQuery。可以在 jQuery.js 文件的末尾调用 noConflict 来全局禁用 $() jQuery 别名。 jQuery.noConflict 返回一个对 jQuery 的引用，因此它可以用来覆盖 jQuery 对象的 $() 别名。

编辑 2：好的，所以现在我找到了另一个关于 jQuery.noConflict() 用法的页面，它告诉我关于订单的一些不同之处。 http://docs.jquery.com/Using_jQuery_with_Other_Libraries。看起来我发现的第一页可能可供某些人编辑，所以我假设第一页不正确。但是在第二页之后我的设置似乎仍然不起作用。

这是我网站的链接：http://tinyurl.com/d8ewd9a 有问题的页面部分就在工作滑块的下方。使用 Jasper Group、ARD、ALLsteel 等的图片。在我的问题中，我稍微改变了一些我真正使用的 id。

【问题讨论】：

你的外部文件是在 jQuery 之前还是之后包含的？它需要在 jQuery 包含之后被包含
警报的顺序是什么？滑块功能在您使用之前是否已加载？
这不是范围问题，您绝对不需要（或不想）做window.slider = ...。只要您以正确的顺序运行，您的代码就可以正常工作：jsfiddle.net/uksZr - 正如 Alexander 所说，首先包含 jquery.js，然后是您自己的外部文件，然后是使用它的代码。跨度>

标签： jquery scope

【解决方案1】：

我发现了问题所在。页面上似乎有第二个 jQuery 包含。因此，在我向其添加函数后，它重新定义了 jQuery。这就是为什么当我尝试调用它时它是未定义的。

我现在永远不会忘记的事情。

感谢大家的帮助。

【讨论】：