如何使用jQuery定义函数参数

Question

i have some syntax problem... This is my little script:

$('.basket_details, .advanced_search_panel, .producers_major_panel').hover(function () {
    mouse_is_inside = true;
}, function () {
    mouse_is_inside = false;
});
$("body").mouseup(function () {
    if (mouse_is_inside) {
        $('.advanced_search_panel, .producers_major_panel').fadeOut('slow');
        $('.basket_details').slideUp('slow');
    }
});

everything's fine but my chrome console screaming that i have syntax errors, and mouse_is_inside is not define, how to correct this mistake?

Answer 1

Try a closure:

(function() {

  var mouse_is_inside = false;

$('.basket_details, .advanced_search_panel, .producers_major_panel').hover(function () {
    mouse_is_inside = true;
}, function () {
    mouse_is_inside = false;
});
$("body").mouseup(function () {
    if (mouse_is_inside) {
        $('.advanced_search_panel, .producers_major_panel').fadeOut('slow');
        $('.basket_details').slideUp('slow');
    }
});

})();

This will allow you use of 'mouse_is_inside' within the scope of the functions. It also stops you from needing to use a global.

Answer 2

You have to add

var mouse_is_inside = false;

at the beginning of your code to mark it as a global variable.

Answer 3

Your mouse_is_inside variable isn't global. You need to define it outside of your functions for both sets to be able to access it.

Example:

var mouse_is_inside = false;

$('.basket_details, .advanced_search_panel, .producers_major_panel').hover(function () {
    mouse_is_inside = true;
}, function () {
    mouse_is_inside = false;
});
$("body").mouseup(function () {
    if (mouse_is_inside) {
        $('.advanced_search_panel, .producers_major_panel').fadeOut('slow');
        $('.basket_details').slideUp('slow');
    }
});

Answer 4

Define variable mouse_is_inside in global window scope . So it can be accessible in all the functions.

or try with Closure as suggested by @Lloyd if you need a restricted scope

Answer 5

Try This:

$(document).on({
    mouseenter: function () {
        mouse_is_inside = true;
    },

    mouseleave: function () {
        mouse_is_inside = false;
    }
}, '.basket_details, .advanced_search_panel, .producers_major_panel');

$("body").mouseup(function () {
    if (mouse_is_inside) {
        $('.advanced_search_panel, .producers_major_panel').fadeOut('slow');
        $('.basket_details').slideUp('slow');
    }
});

Answer 6

The use of the variable mouse_is_inside is not needed at all in this example (unless you do other things with it in other functions its best to remove it altogether as its less efficient and it only clutters the code) in any-case don't use it in your example just call another function in the following way

$(document).ready(function(){
$('.basket_details, .advanced_search_panel, .producers_major_panel').hover(function () {
            /*add the mouse_is_inside=false; here if you need it for other functionality but dont use it for hide your panels*/
    fold(); /*calling this function works just like your example but it fixes the problem and makes you use 1 less variable which is better*/
});
function fold(){
$("body").mouseup(function () {
        $('.advanced_search_panel, .producers_major_panel').fadeOut('slow');
        $('.basket_details').slideUp('slow');
});
}

});

you can also achieve the same functionality using click because you have to hover over an element before you click it. (there might be times where this is not true if other function calls click etc, but hopefully in your example it will still do the job)

$('.basket_details, .advanced_search_panel, .producers_major_panel').click(function(){
        $('.advanced_search_panel, .producers_major_panel').fadeOut('slow');
        $('.basket_details').slideUp('slow');
});

Gl Łukasz,

Niech Moc będzie z tobą