函数在“ $（function（）{”内部工作，但不在外部工作吗？

Question

Here's what the function looks like:

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');

    } 

It's supposed to activate when someone clicks on an image on my website. Here is the HTML code for that:

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

The jQuery and HTML code work great, but it only works if the jQuery code is OUTSIDE this general thing that all my other functions are in:

$(function() {

});      

And the reason why I'm trying to move it inside that general thing, is because I want function changeWidth to call another function that is inside that general thing. And I am assuming that you can only call functions that are inside that general thing from functions that are also inside it.

...Sorry if this all sounds very convoluted... Please let me know if you can help.

Thank you.

Answer 1

And I am assuming that you can only call functions that are inside that general thing from functions that are also inside it.

That's exactly your problem. You're trying to call your handler from outside it.

And it's not a "general thing"; it's an ordinary function that you pass to the $() function as a parameter.

You should not declare a function inside another function unless it's only used by that function.

Answer 2

Right, let's break this down.

You have your element with a handler for an onclick event. As far as the HTML element is concerned, it is looking for function changeWidth on the window object, aka global scope.

You also have code defined in $(function(...)); which is itself a function, and thus anything inside of it is in its own local scope.

When your element fires it's click event, it only knows to check window for changeWidth

One way around this (though I would not suggest it), is to create a pointer in your jQuery function as such:

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

I would suggest keeping with jQuery here though, as it sounds like a good chunk of your code is written in it. That would look something like:

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

alternatively, you can simply pass your changeWidth function directly into the onClick handler above.

edit: closing my braces :)