3
I’m making a map of brazil as svg, need that when I click on a certain state it gives a show in a different div that will have the information about that state.
I need to compare path id with div class and display . show
Follow the code as I’m doing and where I left off the doubt.
<div id="mapa">
<svg xmlns="http://www.w3.org/2000/svg" width="600" height="590" viewBox="0 0 432 428">
<path id="acre" data-name="Acre"
d="M 40.00,152.22
C 40.00 ..." />
</svg>
</div>
<div id=acre>
<p>teste</p>
</div>
The code in js I have finds the path I clicked and gives an alert showing the name as this below, more I want instead to give that warning it gives a . show in a div that will already be . Hide.
$("#mapa path").click(function(){ alert('Voce clicou no estado do '+$(this).attr('data-name')); });
This map div, will you automatically popular with the information or do you have a div for each state? Well, now with the edited question... what are the state divs?
– Rafael Withoeft
And the div you want to show has ID like
data-name
?– Sergio
this has equal id.
– Isaias Antunes
You can change the
id do path para data-id
and use:$('#'+ $(this).attr('data-id')).show()
or varid = $(this).attr('data-id'); $('#'+id).show()
to show the state specific div.– Rafael Withoeft