Como pegar ID da div em que o usuário clicou

[Rodrigo Kx]

Bom galera, seguinte: Tenho uma pagina na qual tenhos 5 links de mapas.

Sendo cada link obtem uma imagem, onde carrega na propria pagina com JQuery.

O problema é como vou saber em qual mapa o usuário clicou? qual div está selecionada atualmente?

O prototipo é esse Link

O código daqueles links são:

<div id="container">

    <div id="block1">
    
        <img src="http://previsaonumerica.cptec.inpe.br/~rpnum/cache/ETA20.png" alt="ETA 20" style="margin-top:30px; width:450px; height:600px;"/>

    </div>
    
    <div id="block2">
    
        <img src="http://www.guiageo-europa.com/mapas/mapa/europa-politico.gif" alt="Europa" style="margin-top:30px; width:450px; height:600px;"/>

    </div>
    
    <div id="block3">
    
        <img src="http://www.suapesquisa.com/mapas/mp-asia.jpg" alt="Ásia" style="margin-top:30px; width:450px; height:600px;"/>
    
    </div>
    
    <div id="block4">
    
        <img src="http://www.infoescola.com/wp-content/uploads/2009/08/oceania_map_UTexas.jpg" alt="Oceania" style="margin-top:30px; width:450px; height:600px;"/>
    
    </div>
    
    <div id="block5">
    
        <img src="http://www.guiageografico.com/mapas/mapa/mapa-africa.gif" alt="África" style="margin-top:30px; width:450px; height:600px;"/>
    
    </div>
    
</div>

----

<script type="text/javascript">
    $(function(){
        $("#for-block1")
            .click(function(){
                $("#block1").show();
                $("#block2").hide();
                $("#block3").hide();
                $("#block4").hide();
                $("#block5").hide();
            });

        $("#for-block2")
            .click(function(){
                $("#block2").show();
                $("#block1").hide();
                $("#block3").hide();
                $("#block4").hide();
                $("#block5").hide();
            });

        $("#for-block3")
            .click(function(){
                $("#block3").show();
                $("#block1").hide();
                $("#block2").hide();
                $("#block4").hide();
                $("#block5").hide();
            });
            
        $("#for-block4")
            .click(function(){
                $("#block4").show();
                $("#block1").hide();
                $("#block2").hide();
                $("#block3").hide();
                $("#block5").hide();
            });
            
        $("#for-block5")
            .click(function(){
                $("#block5").show();
                $("#block1").hide();
                $("#block2").hide();
                $("#block3").hide();
                $("#block4").hide();
            });
    });
</script>

[ESerra]

Movendo PHP » JS.

[fiote]

Respondi sem usar jQuery. Veja se te ajuda.

<script type="text/javascript">

var blocks = ['block1','block2','block3','block4','block5'];

for (var i = 0; i < blocks.length; i++) {
    var nomeBlock = blocks[i];
    var link = document.getElementById('for-'+nomeBlock);
    link.onclick = function() { mostraBlock(nomeBlock); }
}

function mostraBlock(nomeMostrar) {

    document.getElementById(nomeMostrar).style.display = 'block';
    
    for (var i = 0; i < blocks.length; i++) {
        var nomeBlock = blocks[i];
        if (nomeMostrar != nomeBlock) document.getElementById(nomeBlock).style.display = 'none';
    }    
}
</script>

[Rodrigo Kx]

Respondi sem usar jQuery. Veja se te ajuda.

<script type="text/javascript">

var blocks = ['block1','block2','block3','block4','block5'];

for (var i = 0; i < blocks.length; i++) {
    var nomeBlock = blocks[i];
    var link = document.getElementById('for-'+nomeBlock);
    link.onclick = function() { mostraBlock(nomeBlock); }
}

function mostraBlock(nomeMostrar) {

    document.getElementById(nomeMostrar).style.display = 'block';
    
    for (var i = 0; i < blocks.length; i++) {
        var nomeBlock = blocks[i];
        if (nomeMostrar != nomeBlock) document.getElementById(nomeBlock).style.display = 'none';
    }    
}
</script>

Desculpa fiote, mas não entendi seu código, pois a var nomeBlock sempre é = block1, e a nomeMostrar = block5

[fiote]

Desculpa fiote, mas não entendi seu código, pois a var nomeBlock sempre é = block1, e a nomeMostrar = block5

pois a var nomeBlock sempre é = block1... isso não faz sentido.

e a nomeMostrar = block5... ok, aqui eu vacilei mesmo.

Mude essa linha:

link.onclick = function() { mostraBlock(nomeBlock); }

Para:

link.onclick = function() {
    var id = this.id;
    var pts = id.split('-');
    var nomeBlock = pts[1];
    mostraBlock(nomeBlock);
}