Reaching variables in jQuery

I have a code like this :

<script type="text/javascript">
    var currentPicture;//default picture
    var picEL;//the image viewer element
    jQuery("#backImageShower").hover(
        function(i)
        {
            picEL = jQuery("#dynloadarxdock > img");
            currentPicture = picEL.attr("src");
       开发者_如何学Go     picEl.attr("src","back.jpg");
        },
        function()
        {
            picEl.attr("src",currentPicture);
        }
    );
</script>

But when I run this code, it says picEl is not defined. I think it could be because of closures but this code runs perfectly :

<script type="text/javascript">
    var currentPicture;//default picture
    jQuery("#backImageShower").hover(
        function(i)
        {
            currentPicture = jQuery("#dynloadarxdock > img").attr("src");
            jQuery("#dynloadarxdock > img").attr("src","back.jpg");
        },
        function()
        {
            jQuery("#dynloadarxdock > img").attr("src",currentPicture);
        }
    );
</script>

But also this code includes global variable and it works.

Can somebody tell me why?

Thanks.

The problem is that you're mixing the casing. The variable is declared as picEL but sometimes used as picEl (lowercase 'l', which is where your error is).

You are using picEl and not picEL.

 picEl.attr("src",currentPicture);

should be:

 picEL.attr("src",currentPicture);

You are using picEL everywhere except in the second hover function where you have - picEl.