I have a simple question about calling the same function to multiple ellmenets. I guess it should be done with index.
Code:
$('.tab_map1 area').hover(function(){
$('#nav1').find('a').stop().toggleClass('hover', 500);
return false;
});
$('.tab_map2 area').hover(function(){
$('#nav2').find('a').stop().toggleClass('hover', 500);
return false;
});
$('.tab_map3 area').hover(function(){
$('#nav3').find('a').stop().toggleClass('hover', 500);
return false;
});
$('.tab_map4 area').hover(function(){
$('#nav4').find('a').stop().toggleClass('hover', 500);
return false;
});
... (there's 8 of them)
My problem is I have 8 ellements with the same structure and identical names. I'd like to not repeat the same code multiple times. Is there a chance to replace .tab_map1-8 and #nav1-8 with some index value?
What does your HTML look like?
I'm always up for networking with fellow web professionals. Connect with me on
LinkedIn if you like!
Code:
<!-- NAVIBAR -->
<div id="navibar">
<ul>
<li id="nav1" class="active">
<span class="tab_corner_L">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left_first" />
<map class="tab_map1" name="tab_corner_left_first">
<area shape="poly" coords="19,0, 24,0, 24,40, 0,40, 3,36, 15,6" href="#" alt="xxx" />
</map>
</span>
<span class="tab_corner_R">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right" />
<map class="tab_map1" name="tab_corner_right">
<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
</map>
</span>
<a href="#">Home</a>
</li>
<li id="nav2">
<span class="tab_corner_L">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left" />
<map name="tab_corner_left">
<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
</map>
</span>
<span class="tab_corner_R">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right" />
<map name="tab_corner_right">
<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
</map>
</span>
<a href="#">Subpage 1</a>
</li>
<li id="nav3">
<span class="tab_corner_L">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left" />
<map name="tab_corner_left">
<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
</map>
</span>
<span class="tab_corner_R">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right" />
<map name="tab_corner_right">
<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
</map>
</span>
<a href="#">Subpage 2</a>
</li>
<li id="nav4">
<span class="tab_corner_L">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left" />
<map name="tab_corner_left">
<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
</map>
</span>
<span class="tab_corner_R">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right" />
<map name="tab_corner_right">
<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
</map>
</span>
<a href="#">Subpage 3</a>
</li>
<li id="nav5">
<span class="tab_corner_L">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left" />
<map name="tab_corner_left">
<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
</map>
</span>
<span class="tab_corner_R">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right" />
<map name="tab_corner_right">
<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
</map>
</span>
<a href="#">Subpage 4</a>
</li>
<li id="nav6">
<span class="tab_corner_L">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left" />
<map name="tab_corner_left">
<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
</map>
</span>
<span class="tab_corner_R">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right" />
<map name="tab_corner_right">
<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
</map>
</span>
<a href="#">Subpage 5</a>
</li>
<li id="nav7">
<span class="tab_corner_L">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left" />
<map name="tab_corner_left">
<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
</map>
</span>
<span class="tab_corner_R">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right" />
<map name="tab_corner_right">
<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
</map>
</span>
<a href="#">Subpage 6</a>
</li>
<li id="nav8">
<span class="tab_corner_L">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_left" usemap="#tab_corner_left" />
<map name="tab_corner_left">
<area shape="poly" coords="0,0, 5,0, 8,6, 13,19, 22,40, 0,40" href="#" alt="xxx" />
<area shape="poly" coords="14,19, 19,6, 23,0, 28,0, 28,40, 23,40" href="#" alt="xxx" />
</map>
</span>
<span class="tab_corner_R">
<img src="catalog/view/theme/kambud/image/blank.gif" class="tab_corner_right" usemap="#tab_corner_right_last" />
<map name="tab_corner_right_last">
<area shape="poly" coords="0,0, 4,0, 7,5, 19,36, 23,40, 0,40" href="#" alt="xxx" />
</map>
</span>
<a href="#">Subpage 7</a>
</li>
</ul>
<div class="clear"> </div>
</div>
<!-- NAVIBAR end -->
I tried:
Code:
var n = 8;
$('li.tab_map area').eq(n).hover(function(){
$('#nav').eq(n).find('a').stop().toggleClass('hover', 500);
return false;
});
and
Code:
$("#navibar ul").each(function(index) {
$('.tab_map:eq(' + index + ') area').hover(function(index){
$('#nav:eq(' + index + ')').find('a').stop().toggleClass('hover', 500);
return false;
});
});
but it doesn't work.
Last edited by Annaccond; 09-02-2011 at 10:56 AM .
Does Firebug toss you any error in the script?
Code is fine and works - I'd like to just make jQ shorter way (if possible).JSfiddle example:http://jsfiddle.net/LsAEu/
I've updated your fiddle, only changing the JavaScript part:http://jsfiddle.net/dfreema1/LsAEu/5/
I'm always up for networking with fellow web professionals. Connect with me on
LinkedIn if you like!
Thank you very much cbVision ! This is exactly I tried to achieve.
Thread Information
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
Forum Rules
optimize code of multiple hover
Reply With Quote
Bookmarks