Simplify jQuery with .each()?

Question

Can someone help me over this please. I have this piece of code:

$("#infocontent-northamerica").hide();
$("#infocontent-northamerica div").hide();
$('#linkwrapper-northamerica a[id]').click(function(){
    var vsubmen = this.id +"content";  

    if( $("#infocontent-northamerica").is(":visible") == false ) {
        $("#" + vsubmen).show('fast',function() {
            $("#infocontent-northamerica").slideDown();
        });
    } else if ( $("#" + vsubmen).is(":visible") == false ) {
        $("#infocontent-northamerica").slideUp('slow',function(){
            $("#infocontent-northamerica div").hide();
            $("#" + vsubmen).show();
            $("#infocontent-northamerica").slideDown('slow');    
        });
    } else {
        $("#infocontent-northamerica").slideUp('slow',function(){
            $("#infocontent-northamerica div").hide();
        });
}
    return false;
});

I am repeating this 4 times, cause instead of #infocontent-northamerica I am using also for europe, latinamerica and asia. I know that this can be simplified with .each() with defined array, something like this:

var arr = { "europe", "northamerica", "latinamerica", "asiapacific" };
$.each(arr, function() {

});

But I am not sure how to completely make this work. Any answer will be really helpful ...

Edit:

Linkwrapper div:

<div id="linkwrapper-northamerica">
     <a id="link11" href="#">St. Petersburg, FL</a>
     <a id="link12" href="#">Raleigh, NC</a>
     <a id="link13" href="#">Winchester, KY</a>
     <a id="link14" href="#">Somerset, NJ, HQ</a>
     <a id="link15" href="#">Philadelphia, PA</a>
     <a id="link16" href="#">Woodstock, IL</a>
     <a id="link17" href="#">Middleton, WI</a>
</div><!-- end of linkwrapper -->

<div id="infocontent-northamerica">
     <div class="midleft" id="link11content">St. Petersburg, FL</div>
     <div class="midleft" id="link12content">Raleigh, NC</div>
     <div class="midleft" id="link13content">Winchester, KY</div>
     <div class="midleft" id="link14content">Somerset, NJ, HQ</div>
     <div class="midleft" id="link15content">Philadelphia, PA</div>
     <div class="midleft" id="link16content">Woodstock, IL</div>
     <div class="midleft" id="link17content">Middleton, WI</div>
</div><!-- end of infocontent -->

When you click on anchor, div is showed with name of the city from infocontent div. Its all the same for asia, europe and latin america

For the love of Pete Local Variables man!!! $() is not a variable.. — rlemon, Jan 23 '12 at 15:37

Joe Coder · Accepted Answer · 2012-01-23 13:32:35Z

up vote 5 down vote accepted

var regions = ['europe', 'northamerica', 'latinamerica', 'asiapacific'];
$.each(regions, function(i, region) {
    var $infocontent = $('#infocontent-' + region);
    var $infocontent_div = $infocontent.find('div');
    $infocontent.add($infocontent_div).hide();
    $('#linkwrapper-' + region + ' a[id]').click(function() {
        var $vsubmen = $('#' + this.id +'content');

        if (!$infocontent.is(':visible')) {
            $vsubmen.show('fast', function() {
                $infocontent.slideDown();
            });
        }
        if (!$vsubmen.is(':visible')) {
            $infocontent.slideUp('slow', function(){
                $infocontent_div.hide();
                $vsubmen.show();
                $infocontent.slideDown('slow'); 
            });
        }
        else {
            $infocontent.slideUp('slow',function(){
                $infocontent_div.hide();
            });
        }
        return false;
    });
});

answered Jan 23 '12 at 13:32

Joe Coder
1661

Thanks Joe for you answer, its showing up, but it is showing only first time when I click. When I click again on other City, its not showing it or hiding previous one – Matas Jan 23 '12 at 13:37

I think it's the if-else logic you had. Let me edit it real quick.... – Joe Coder Jan 23 '12 at 13:40

Excellent! It's working. Thank u very much Joe :) – Matas Jan 23 '12 at 13:44

Happy to help =] – Joe Coder Jan 23 '12 at 13:56

asked	1 year ago
viewed	168 times
active	1 year ago

Simplify jQuery with .each()?

migrated from stackoverflow.com Jan 23 '12 at 15:27

1 Answer

Your Answer

Simplify jQuery with .each()?

migrated from stackoverflow.com Jan 23 '12 at 15:27

1 Answer

Your Answer

Sign up or login

Post as a guest

Related