CODEWITHSUNDEEP
jquery
Flickdraw
Flickdraw

Reputation: 683

Combine multiple jQuery events into one

I have the following jQuery...

$('.class1').mouseenter(function() {
    $('#div1').css('display', 'none');
    $('#div2').css('display', 'none');
    $('#div3').css('display', 'none');
});

$('.class2').mouseenter(function() {
    $('#div1').css('display', 'none');
    $('#div2').css('display', 'none');
    $('#div3').css('display', 'none');
});

$('.class3').mouseenter(function() {
    $('#div1').css('display', 'none');
    $('#div2').css('display', 'none');
    $('#div3').css('display', 'none');
});

Each event does the same thing (they all hide div1, div2 and div3), but has a different class triggering it and I'm wondering if there is a way I can combine them into one. So that when either class1, class2 or class3 is entered with the mouse, div 1, 2 and 3 are set to display:none;. Like...

$('.class1' OR '.class2' OR '.class3).mouseenter(function() {
    $('#div1').css('display', 'none');
    $('#div2').css('display', 'none');
    $('#div3').css('display', 'none');
});

I know I can do this with...

$('.class1').addClass("class4");
$('.class2').addClass("class4");
$('.class3').addClass("class4");
$('.class4').mouseenter(function() {
    $('#div1').css('display', 'none');
    $('#div2').css('display', 'none');
    $('#div3').css('display', 'none');
});

But I'm wondering if the way I mentioned above is possible and if so how to do it?

Upvotes: 0

Views: 127

Answers (2)

insomiac
insomiac

Reputation: 5664

you can process multiple elements in jquery by having multiple element's class or id separated by COMMA (",")

$('.class1').mouseenter(function() {
    $('#div1, #div2, #div3').css('display', 'none');
});

$('.class2').mouseenter(function() {
    $('#div1, #div2, #div3').css('display', 'none');
});

$('.class3').mouseenter(function() {
   $('#div1, #div2, #div3').css('display', 'none');
});

OR More better way..

$('.class1, .class2, .class3').mouseenter(function() {
     $('#div1, #div2, #div3').css('display', 'none');
});

Upvotes: 1

adeneo
adeneo

Reputation: 318162

$('.class1, .class2, .class3').on('mouseenter', function() {
    $('#div1, #div2, #div3').hide();
});

or to hide only the ones not matching the number in the selector:

$('.class1, .class2, .class3').on('mouseenter', function() {
    var this_class = this.className.replace('class',''); // works for one class only

    $('#div1, #div2, #div3').filter(function() {
        return this.id.indexOf(this_class) == -1;
    }).hide();
});

Upvotes: 3

Related Questions