is there a way to combine those hover functions

Question

i have many of whitch a need to group to change opacity after hover, all of them need to have unique IDs, is there a way to combine all those hover functions to one function ??

jQuery

//09    
    $('#c_09_241a, #c_09_241b, #c_09_241c, #c_09_241d').hover(
        function() {
            $('#c_09_241a, #c_09_241b, #c_09_241c, #c_09_241d').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_09_241a, #c_09_241b, #c_09_241c, #c_09_241d').stop(true, true).css('opacity','0');
    }); 
    $('#c_09_242a, #c_09_242b').hover(
        function() {
            $('#c_09_242a, #c_09_242b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_09_242a, #c_09_242b').stop(true, true).css('opacity','0');
    });
    $('#c_09_245a, #c_09_245b').hover(
        function() {
            $('#c_09_245a, #c_09_245b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_09_245a, #c_09_245b').stop(true, true).css('opacity','0');
    });
    $('#c_09_246a, #c_09_246b').hover(
        function() {
            $('#c_09_246a, #c_09_246b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_09_246a, #c_09_246b').stop(true, true).css('opacity','0');
    });

    //08    
    $('#c_08_235a, #c_08_235b, #c_08_235c, #c_08_235d').hover(
        function() {
            $('#c_08_235a, #c_08_235b, #c_08_235c, #c_08_235d').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_08_235a, #c_08_235b, #c_08_235c, #c_08_235d').stop(true, true).css('opacity','0');
    }); 
    $('#c_08_236a, #c_08_236b').hover(
        function() {
            $('#c_08_236a, #c_08_236b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_08_236a, #c_08_236b').stop(true, true).css('opacity','0');
    });
    $('#c_08_239a, #c_08_239b').hover(
        function() {
            $('#c_08_239a, #c_08_239b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_08_239a, #c_08_239b').stop(true, true).css('opacity','0');
    });
    $('#c_08_240a, #c_08_240b').hover(
        function() {
            $('#c_08_240a, #c_08_240b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_08_240a, #c_08_240b').stop(true, true).css('opacity','0');
    });

    //07    
    $('#c_07_227a, #c_07_227b').hover(
        function() {
            $('#c_07_227a, #c_07_227b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_07_227a, #c_07_227b').stop(true, true).css('opacity','0');
    });
    $('#c_07_228a, #c_07_228b, #c_07_228c').hover(
        function() {
            $('#c_07_228a, #c_07_228b, #c_07_228c').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_07_228a, #c_07_228b, #c_07_228c').stop(true, true).css('opacity','0');
    });
    $('#c_07_007a, #c_07_007b').hover(
        function() {
            $('#c_07_007a, #c_07_007b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_07_007a, #c_07_007b').stop(true, true).css('opacity','0');
    });
    $('#c_07_008a, #c_07_008b').hover(
        function() {
            $('#c_07_008a, #c_07_008b').stop(true, true).css('opacity','1');
        },
        function() {
             $('#c_07_008a, #c_07_008b').stop(true, true).css('opacity','0');
    });

HTML

<div id="rzuty09p" class="rzuty">
            <span id="c_09_241a" class="mieszkanie" title=""></span>
            <span id="c_09_241b" class="mieszkanie" title=""></span>
            <span id="c_09_241c" class="mieszkanie" title=""></span>
            <span id="c_09_241d" class="mieszkanie" title=""></span>
            <span id="c_09_242a" class="mieszkanie" title=""></span>
            <span id="c_09_242b" class="mieszkanie" title=""></span>
            <span id="c_09_243" class="mieszkanie" title=""></span>
            <span id="c_09_244" class="mieszkanie" title=""></span>
            <span id="c_09_245a" class="mieszkanie" title=""></span>
            <span id="c_09_245b" class="mieszkanie" title=""></span>
            <span id="c_09_246a" class="mieszkanie nie" title=""></span>
            <span id="c_09_246b" class="mieszkanie nie" title=""></span>
        </div>  

<div id="rzuty08p" class="rzuty">
            <span id="c_08_235a" class="mieszkanie" title=""></span>
            <span id="c_08_235b" class="mieszkanie" title=""></span>
            <span id="c_08_235c" class="mieszkanie" title=""></span>
            <span id="c_08_235d" class="mieszkanie" title=""></span>
            <span id="c_08_236a" class="mieszkanie nie" title=""></span>
            <span id="c_08_236b" class="mieszkanie nie" title=""></span>
            <span id="c_08_237" class="mieszkanie" title=""></span>
            <span id="c_08_238" class="mieszkanie" title=""></span>
            <span id="c_08_239a" class="mieszkanie" title=""></span>
            <span id="c_08_239b" class="mieszkanie" title=""></span>
            <span id="c_08_240a" class="mieszkanie" title=""></span>
            <span id="c_08_240b" class="mieszkanie" title=""></span>
        </div>      

<div id="rzuty07p" class="rzuty">
            <span id="c_07_226" class="mieszkanie" title=""></span>
            <span id="c_07_227a" class="mieszkanie" title=""></span>
            <span id="c_07_227b" class="mieszkanie" title=""></span>
            <span id="c_07_228a" class="mieszkanie" title=""></span>
            <span id="c_07_228b" class="mieszkanie" title=""></span>
            <span id="c_07_228c" class="mieszkanie" title=""></span>
            <span id="c_07_229" class="mieszkanie nie" title=""></span>
            <span id="c_07_005" class="mieszkanie" title=""></span>
            <span id="c_07_006" class="mieszkanie" title=""></span>
            <span id="c_07_007a" class="mieszkanie nie" title=""></span>
            <span id="c_07_007b" class="mieszkanie nie" title=""></span>
            <span id="c_07_008a" class="mieszkanie" title=""></span>
            <span id="c_07_008b" class="mieszkanie" title=""></span>
        </div>

Joseph Silber · Accepted Answer · 2012-08-16 17:25:25Z

var groups = [
    '09_241', '09_242', '09_245', '09_246',
    '08_235', '08_236', '08_239', '08_240',
    '07_227', '07_228', '07_007', '07_008'
];

$.each(groups, function(i, group) {

    var $group = $('[id^=c_' + group + ']');

    $group.hover(function() {
        $group.stop(true, true).css('opacity', '1');
    }, function() {
        $group.stop(true, true).css('opacity', '0');
    });
});

Here's the fiddle: http://jsfiddle.net/W8GA3/

This is similar to @Matt's solution, with the following key differences:

Sane Selectors - There's no need to add all those selectors by hand. Simply use an attribute selector to select all elements that start with a given string.
Selector caching - If there's one thing you can do to your code to keep it fast, it's selector caching.
$.each - We're using jQuery's each helper to loop through the array, since it also supports older browsers (forEach is not supported in IE < 9).

If you want to, you could even build that original groups array dynamically, which will make this much easier to maintain:

var groups = [];

$('[id^=c_]').each(function() {
    // Extract group number from ID
    var group = this.id.substring(2, 8);
    // If the ID is not in the groups array, add it
    ~$.inArray( group, groups ) || groups.push( group );
});

Here's the fiddle: http://jsfiddle.net/W8GA3/1/

@gidzior - Glad it helped you. You might have to modify some bits of the code depending on your naming conventions. $('[id^=c_]') and this.id.substring(2, 8) make a lot of assumptions, and I hope I wasn't too wrong...

Zathrus Writer · Answer 2 · 2012-08-16 12:52:29Z

var a = new Array();
a.push('#c_09_241a, #c_09_241b, #c_09_241c, #c_09_241d');
a.push('#c_09_242a, #c_09_242b');
...

function search_for_id(id) {
   for (var i in a) {
       if (a[i].indexOf('#'+id) > -1) {
           return a[i];
       }
   }
}

for (var i in a) {
    $(a[i]).hover(
        function() {
            $(search_for_id($(this).attr('id'))).stop(true, true).css('opacity','1');
        },
        function() {
             $(search_for_id($(this).attr('id'))).stop(true, true).css('opacity','0');
    }); 
}

no problemo :) also, please try Matt's answer, since it might be a bit faster ;)

twiddles · Answer 3 · 2012-08-16 12:56:59Z

up vote 1 down vote

var ids = [
    "#c_07_227a, #c_07_227b",
    "#c_07_228a, #c_07_228b, #c_07_228c"
    // add more here
];

ids.forEach(function(i) {
    $(i).hover(function() {
        $(i).stop(true, true).css('opacity', '1');
    }, function() {
        $(i).stop(true, true).css('opacity', '0');
    });
});

answered Aug 16 '12 at 12:56

twiddles
1513

	+1 for array creation shorthand, though I wasn't sure $(i).hover() would work, so I created the lookup function... if this works, then your answer is faster than mine :) – Zathrus Writer Aug 16 '12 at 13:03
	it works too so if it's faster so this is the final answer – gidzior Aug 16 '12 at 13:04

asked	9 months ago
viewed	53 times
active	9 months ago

is there a way to combine those hover functions

3 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged javascript jquery or ask your own question.

is there a way to combine those hover functions

3 Answers

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged javascript jquery or ask your own question.

Related