javascript - 函数在 "$(function() {"内部有效但在外部无效？

Question

函数如下所示:

function changeWidth(el,event) {

        event.preventDefault();

        if($('#RightSide').is(':visible')){
           $('#RightSide').delay(1000).fadeOut(0);            
        }
        else{
           $('#RightSide').fadeIn(0);
        }


        var toggleWidth = $("#LeftPanel").width() == 365 ? "1096px" : "365px";
        /* $('#LeftPanel').width(toggleWidth);*/
        $('#LeftPanel').animate( {'width': toggleWidth}, 1000);  

        if($('#LeftPanel').is('.LeftPanelRadius')){
            $('#LeftPanel').removeClass('LeftPanelRadius'); return;
        }

        $('#LeftPanel').addClass('LeftPanelRadius');

    } 

它应该在有人点击我网站上的图片时激活。这是它的 HTML 代码:

<img src="images/magCircy.png" width="33px" height="33px" onClick="changeWidth(this,event);"></img>      

jQuery 和 HTML 代码工作得很好，但只有当 jQuery 代码在我所有其他功能所在的一般事物之外时，它才有效:

$(function() {

});      

我试图将它移动到 内部 的原因是因为我希望函数 changeWidth 调用该一般事物内部的另一个函数。而且我假设您只能从也在其中的函数调用该通用事物内部的函数。

...抱歉，如果这一切听起来很复杂...如果您能提供帮助，请告诉我。

谢谢。

Answer 1

好吧，让我们分解一下。

您的元素带有一个 onclick 事件的处理程序。就 HTML 元素而言，它正在寻找 window 对象上的 function changeWidth，也就是全局范围。

您还在 $(function(...)); 中定义了代码，它本身就是一个函数，因此其中的任何内容都在其自己的本地范围内。

当您的元素触发它的点击事件时，它只知道检查 window 的 changeWidth

解决此问题的一种方法(尽管我不建议这样做)是在您的 jQuery 函数中创建一个指针:

$(function () {
    window.changeWidth = function () { /*code*/ };
});

不过，我建议在这里继续使用 jQuery，因为听起来您的大部分代码都是用它编写的。这看起来像:

$(function() {
    $('img[src="images/magCircy.png"]').on( 'click', function() {
         //your code here
    });
});

或者，您可以直接将 changeWidth 函数直接传递到上面的 onClick 处理程序中。

编辑:关闭我的牙套:)