3
\$\begingroup\$

I've been working on this day and night and, since I'm a newbie, I can't seem to figure this out. I have a map with 27 states. Each, on click, show the highlighted state and an info box. Also, I have 27 links that, on click, do the same as the above. So, I wrote a huge code and got it to work fine, but I'd like to resume that code by creating a loop or something like it.

Here's the code that works:

var div = [ac, al, am, ap, ba, ce, dsf, es, go, ma, mg, ms, mt, pa, pb, pe, pi, pr, rj, rn, ro, rr, rs, sc, se, sp, to];
var div1 = [ac1, al1, am1, ap1, ba1, ce1, dsf1, es1, go1, ma1, mg1, ms1, mt1, pa1, pb1, pe1, pi1, pr1, rj1, rn1, ro1, rr1, rs1, sc1, se1, sp1, to1];
var botao = [aclegenda, allegenda, amlegenda, aplegenda, balegenda, celegenda, dflegenda, eslegenda, golegenda, malegenda, mglegenda, mslegenda, mtlegenda, palegenda, pblegenda, pelegenda, pilegenda, prlegenda, rjlegenda, rnlegenda, rolegenda, rrlegenda, rslegenda, sclegenda, selegenda, splegenda, tolegenda];
var botao1 = [ac, al, am, ap, ba, ce, df, es, go, ma, mg, ms, mt, pa, pb, pe, pi, pr, rj, rn, ro, rr, rs, sc, se, sp, to];
function esconder() {
$(div).slideUp( "slow" );
$(div1).hide();
}

$(function () {
esconder();
$('#aclegenda , #acre').click(function() {
    if ($(ac, ac1).is(":visible")) {
        $(ac).slideUp( "slow" );
        $(ac1).hide();
    }else{
        esconder();
        $(ac).slideDown( "slow" );
        $(ac1).show();
    }
});

$('#allegenda , #alagoas').click(function() {
    if ($(al, al1).is(":visible")) {
        $(al).slideUp( "slow" );
        $(al1).hide();
    }else{
        esconder();
        $(al).slideDown( "slow" );
        $(al1).show();
    }
});

$('#amlegenda , #amazonas').click(function() {
    if ($(am, am1).is(":visible")) {
        $(am).slideUp( "slow" );
        $(am1).hide();
    }else{
        esconder();
        $(am).slideDown( "slow" );
        $(am1).show();
    }
});

$('#aplegenda , #amapa').click(function() {
    if ($(ap, ap1).is(":visible")) {
        $(ap).slideUp( "slow" );
        $(ap1).hide();
    }else{
        esconder();
        $(ap).slideDown( "slow" );
        $(ap1).show();
    }
});

$('#balegenda , #bahia').click(function() {
    if ($(ba, ba1).is(":visible")) {
        $(ba).slideUp( "slow" );
        $(ba1).hide();
    }else{
        esconder();
        $(ba).slideDown( "slow" );
        $(ba1).show();
    }
});

$('#celegenda , #ceara').click(function() {
    if ($(ce, ce1).is(":visible")) {
        $(ce).slideUp( "slow" );
        $(ce1).hide();
    }else{
        esconder();
        $(ce).slideDown( "slow" );
        $(ce1).show();
    }
});
/* DF */
$('#dflegenda , #df').click(function() {
    if ($(dsf, dsf1).is(":visible")) {
        $(dsf).slideUp( "slow" );
        $(dsf1).hide();
    }else{
        esconder();
        $(dsf).slideDown( "slow" );
        $(dsf1).show();
    }
});

$('#eslegenda , #espiritosanto').click(function() {
    if ($(es, es1).is(":visible")) {
        $(es).slideUp( "slow" );
        $(es1).hide();
    }else{
        esconder();
        $(es).slideDown( "slow" );
        $(es1).show();
    }
});

$('#golegenda , #goias').click(function() {
    if ($(go, go1).is(":visible")) {
        $(go).slideUp( "slow" );
        $(go1).hide();
    }else{
        esconder();
        $(go).slideDown( "slow" );
        $(go1).show();
    }
});

$('#malegenda , #maranhao').click(function() {
    if ($(ma, ma1).is(":visible")) {
        $(ma).slideUp( "slow" );
        $(ma1).hide();
    }else{
        esconder();
        $(ma).slideDown( "slow" );
        $(ma1).show();
    }
});

$('#mglegenda , #minasgerais').click(function() {
    if ($(mg, mg1).is(":visible")) {
        $(mg).slideUp( "slow" );
        $(mg1).hide();
    }else{
        esconder();
        $(mg).slideDown( "slow" );
        $(mg1).show();
    }
});

$('#mslegenda , #matogrossosul').click(function() {
    if ($(ms, ms1).is(":visible")) {
        $(ms).slideUp( "slow" );
        $(ms1).hide();
    }else{
        esconder();
        $(ms).slideDown( "slow" );
        $(ms1).show();
    }
});

$('#mtlegenda , #matogrosso').click(function() {
    if ($(mt, mt1).is(":visible")) {
        $(mt).slideUp( "slow" );
        $(mt1).hide();
    }else{
        esconder();
        $(mt).slideDown( "slow" );
        $(mt1).show();
    }
});

$('#palegenda , #para').click(function() {
    if ($(pa, pa1).is(":visible")) {
        $(pa).slideUp( "slow" );
        $(pa1).hide();
    }else{
        esconder();
        $(pa).slideDown( "slow" );
        $(pa1).show();
    }
});

$('#pblegenda , #paraiba').click(function() {
    if ($(pb, pb1).is(":visible")) {
        $(pb).slideUp( "slow" );
        $(pb1).hide();
    }else{
        esconder();
        $(pb).slideDown( "slow" );
        $(pb1).show();
    }
});

$('#pelegenda , #pernambuco').click(function() {
    if ($(pe, pe1).is(":visible")) {
        $(pe).slideUp( "slow" );
        $(pe1).hide();
    }else{
        esconder();
        $(pe).slideDown( "slow" );
        $(pe1).show();
    }
});

$('#pilegenda , #piaui').click(function() {
    if ($(pi, pi1).is(":visible")) {
        $(pi).slideUp( "slow" );
        $(pi1).hide();
    }else{
        esconder();
        $(pi).slideDown( "slow" );
        $(pi1).show();
    }
});

$('#prlegenda , #parana').click(function() {
    if ($(pr, pr1).is(":visible")) {
        $(pr).slideUp( "slow" );
        $(pr1).hide();
    }else{
        esconder();
        $(pr).slideDown( "slow" );
        $(pr1).show();
    }
});

$('#rjlegenda , #riodejaneiro').click(function() {
    if ($(rj, rj1).is(":visible")) {
        $(rj).slideUp( "slow" );
        $(rj1).hide();
    }else{
        esconder();
        $(rj).slideDown( "slow" );
        $(rj1).show();
    }
});

$('#rnlegenda , #riograndenorte').click(function() {
    if ($(rn, rn1).is(":visible")) {
        $(rn).slideUp( "slow" );
        $(rn1).hide();
    }else{
        esconder();
        $(rn).slideDown( "slow" );
        $(rn1).show();
    }
});

$('#rolegenda , #rondonia').click(function() {
    if ($(ro, ro1).is(":visible")) {
        $(ro).slideUp( "slow" );
        $(ro1).hide();
    }else{
        esconder();
        $(ro).slideDown( "slow" );
        $(ro1).show();
    }
});

$('#rrlegenda , #roraima').click(function() {
    if ($(rr, rr1).is(":visible")) {
        $(rr).slideUp( "slow" );
        $(rr1).hide();
    }else{
        esconder();
        $(rr).slideDown( "slow" );
        $(rr1).show();
    }
});

$('#rslegenda , #riograndesul').click(function() {
    if ($(rs, rs1).is(":visible")) {
        $(rs).slideUp( "slow" );
        $(rs1).hide();
    }else{
        esconder();
        $(rs).slideDown( "slow" );
        $(rs1).show();
    }
});

$('#sclegenda , #santacatarina').click(function() {
    if ($(sc, sc1).is(":visible")) {
        $(sc).slideUp( "slow" );
        $(sc1).hide();
    }else{
        esconder();
        $(sc).slideDown( "slow" );
        $(sc1).show();
    }
});

$('#selegenda , #sergipe').click(function() {
    if ($(se, se1).is(":visible")) {
        $(se).slideUp( "slow" );
        $(se1).hide();
    }else{
        esconder();
        $(se).slideDown( "slow" );
        $(se1).show();
    }
});

$('#splegenda , #saopaulo').click(function() {
    if ($(sp, sp1).is(":visible")) {
        $(sp).slideUp( "slow" );
        $(sp1).hide();
    }else{
        esconder();
        $(sp).slideDown( "slow" );
        $(sp1).show();
    }
});

$('#tolegenda , #tocantins').click(function() {
    if ($(to, to1).is(":visible")) {
        $(to).slideUp( "slow" );
        $(to1).hide();
    }else{
        esconder();
        $(to).slideDown( "slow" );
        $(to1).show();
    }
});
});

For example's sake, this is the code that doesn't work, which I have been trying to work on:

var div = [ac, al, am, ap, ba, ce, dsf, es, go, ma, mg, ms, mt, pa, pb, pe, pi, pr, rj, rn, ro, rr, rs, sc, se, sp, to];
var div1 = [ac1, al1, am1, ap1, ba1, ce1, dsf1, es1, go1, ma1, mg1, ms1, mt1, pa1, pb1, pe1, pi1, pr1, rj1, rn1, ro1, rr1, rs1, sc1, se1, sp1, to1];
var botao = [aclegenda, allegenda, amlegenda, aplegenda, balegenda, celegenda, dflegenda, eslegenda, golegenda, malegenda, mglegenda, mslegenda, mtlegenda, palegenda, pblegenda, pelegenda, pilegenda, prlegenda, rjlegenda, rnlegenda, rolegenda, rrlegenda, rslegenda, sclegenda, selegenda, splegenda, tolegenda];
var botao1 = [ac, al, am, ap, ba, ce, df, es, go, ma, mg, ms, mt, pa, pb, pe, pi, pr, rj, rn, ro, rr, rs, sc, se, sp, to];

function esconder() {
$(div).slideUp( "slow" );
$(div1).hide();
}

$(function () {
esconder();
function contar() {
for (i=0; i<27; i++) {
    var d = div[i];
    var d1 = div1[i];
    var b = botao[i];
    var b1 = botao1[i];


$('#b , #b1').click(function() {
    if ($(d, d1).is(":visible")) {
        $(d).slideUp( "slow" );
        $(d1).hide();
    }else{
        esconder();
        $(d).slideDown( "slow" );
        $(d1).show();
    }
});
}
}
});

Can you please try to help me? I already got it to work, but I'd like to minimize my script!

Fiddle of the huge working code

\$\endgroup\$
  • \$\begingroup\$ Welcome to Code Review! I'm sure there is a way to improve this. I hope you get some good answers! \$\endgroup\$ – Phrancis Apr 10 '15 at 19:57
1
\$\begingroup\$

You can bind a single click to many elements using a class selector, etc. this refers to the element that ended up being the target/srcElement for the event.

$('.toggleable').click(function() {
   if($(this).is(':visible')) {
       $(this).slideUp('slow');
       $(this).find('.innerDiv').hide();
   } else {
       $(this).slideDown('slow');
       $(this).find('.innerDiv').show();
   }
});

Under the covers, each matching element will get its own closure, and therefore operate correctly. I'm assuming in this code that one div is contained within the other (there's no HTML here). It's pretty trivial to use other methods, such as finding siblings, etc.

In an absolutely worst-case scenario, you can use data attributes on the clickable element to target other named elements, or you could make a named map:

var assoc = {
    ac: ac1, al: al1, /* and so on */ };
$('#ac, #al').click(function() {
   if($(this).is(':visible')) {
       $(this).slideUp('slow');
       $(assoc[this.id]).hide();
   } else {
       $(this).slideDown('slow');
       $(assoc[this.id]).show();
   }
});

I'd rather prefer the first method, as you can then add/remove elements in your HTML without having to refactor code.

There's plenty of other ways you could do this dynamically, including using $.on to bind to a parent element and then determine which element was clicked.

// uses assoc from prior example
$('#parent').on('click','.toggleable', function() {
    var id = $(this).attr('id'), v1 = $(this), v2 = assoc[id];
    if(v1.is(':visible')) {
        v1.slideUp('slow');
        v2.hide();
    } else {
        v1.slideDown('slow');
        v2.show();
    }
});

This final version allows new .toggleable elements to be added to #parent on the fly, and they will also react correctly (assuming they are styled, loaded into assoc, etc).


This final version, http://jsfiddle.net/dx9omcwd/11/, works the same as the original code, using just 35 lines of code. Included here is the JS code.

var info = {};
var div = [ac, al, am, ap, ba, ce, dsf, es, go, ma, mg, ms, mt, pa, pb, pe, pi, pr, rj, rn, ro, rr, rs, sc, se, sp, to];
var div1 = [ac1, al1, am1, ap1, ba1, ce1, dsf1, es1, go1, ma1, mg1, ms1, mt1, pa1, pb1, pe1, pi1, pr1, rj1, rn1, ro1, rr1, rs1, sc1, se1, sp1, to1];
function esconder() {
    $(div).slideUp("slow");
    $(div1).hide();
}

$(function () {
    var botao = ['aclegenda', 'allegenda', 'amlegenda', 'aplegenda', 'balegenda', 'celegenda', 'dflegenda', 'eslegenda', 'golegenda', 'malegenda', 'mglegenda', 'mslegenda', 'mtlegenda', 'palegenda', 'pblegenda', 'pelegenda', 'pilegenda', 'prlegenda', 'rjlegenda', 'rnlegenda', 'rolegenda', 'rrlegenda', 'rslegenda', 'sclegenda', 'selegenda', 'splegenda', 'tolegenda'];
    var botao1 = ['acre', 'alagoas', 'amazonas', 'amapa', 'bahia', 'ceara', 'df', 'espiritosanto', 'goias', 'maranhao', 'minasgerais', 'matogrossosul', 'matogrosso', 'para', 'paraiba', 'pernambuco', 'piaui', 'parana', 'riodejaneiro', 'riograndenorte', 'rondonia', 'roraima', 'riograndesul', 'santacatarina', 'sergipe', 'saopaulo', 'tocantins'];

    function prepare() {
        var index = 0;
        while (index < botao.length) {
            info[botao[index]] = info[botao1[index]] = [div[index], div1[index]];
            index = index + 1;
        }
    }
    prepare();
    esconder();
    $('.container').on('click', '.legendalinks.jsvoidcursor, .linksestados1',
                       function () {
                           var id = $(this).attr('id'),
                               curr = info[id];
                           if ($(curr[0], curr[1]).is(':visible')) {
                               $(curr[0]).slideUp('slow');
                               $(curr[1]).hide();
                           } else {
                               esconder();
                               $(curr[0]).slideDown('slow');
                               $(curr[1]).show();
                           }
                       });
});

I'm sure this could be optimized even more, but this answer was meant only to illustrate the use of on to minimize the amount of code that has to be written. In this case, using just one single function with some prepared data greatly reduces the amount of data that's necessary.

Further optimizations would be to use objects instead of just plain arrays to associate the data.

\$\endgroup\$
  • \$\begingroup\$ None of them worked. :( You can see the Fiddle with the HTML at the bottom of the question. But thanks for the huge effort! \$\endgroup\$ – meninadeluz Apr 11 '15 at 6:16
  • \$\begingroup\$ Oh. I missed the link. I'll update momentarily after I look. \$\endgroup\$ – phyrfox Apr 11 '15 at 12:55
  • \$\begingroup\$ @meninadeluz See the new version. It's not perfect, but I think it should point you in the right direction. \$\endgroup\$ – phyrfox Apr 11 '15 at 14:55
  • \$\begingroup\$ OMG, you're a God! It worked perfectly and I couldn't even start to think about that solution, it's too complex for me! lol. Thank you so much! \$\endgroup\$ – meninadeluz Apr 11 '15 at 19:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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