2

Estou trabalhando com um mapa do Brasil em SVG, e preciso que quando clicar em um estado, ele adicione a classe "active" e remova a classe "active" dos outros. Também tem a função de adicionar o nome do estado em um input.

Exemplo:

<path id="Santa Catarina" class="BR-SC RegiaoSul str1" d="M101205 160059l0 -33 -32 -32 32" />

<script type="text/javascript">
    $(docutment).ready(function() {
        $(".str1").click(function(){
            var state = $(this).attr("id");
            $(".str1").removeClass("active");
            $(this).addClass("active");
            $("input[name=estado]").val( state );
        });
    });
</script>

Com jQuery não funciona é claro, gostaria de fazer isso em javascript, alguém pode me ajudar?

2
  • É alguma biblioteca open source do svg do mapa? Que você está utilizando? Se puder postar um exemplo no jsFiddle 4/03/2014 às 13:26
  • Eu só tenho o arquivo SVG, o script ainda não, pois não sei como fazer. Aqui está o link pastebin.com/NVPUnEub
    – Raank
    4/03/2014 às 14:00

1 Resposta 1

1

Um exemplo: aqui

Mais tarde, edito e explico melhor como é que funciona, agora estou com pouco tempo.

Mais olha lá se era assim?

Qualquer duvida comenta aew. Abraço.

EDIT 1

Esse é o codigo de remove e adiciona a class:

$('.str1').click(function(ev) {
$('.str1').each(function(){
    var clazz = this.getAttribute("class");
    clazz = clazz.replace("active", "");
    this.setAttribute("class", clazz);
});
ev.target.setAttribute("class", "active " + ev.target.getAttribute("class"));
});

EDIT 2

Atualizei o código anterior para também obter o id e adiciona-lo no input. Segue código atualizado:

$('.str1').click(function(ev) {
$('.str1').each(function(){
    var clazz = this.getAttribute("class");
    clazz = clazz.replace("active", "");
    this.setAttribute("class", clazz);
});
ev.target.setAttribute("class", "active " + ev.target.getAttribute("class"));        
var estado = ev.target.getAttribute("id"); // sem jquery
/* ou */
//var estado = $(ev.target).attr('id'); // com jquery
$('#estado').val(estado);
});

Atualizei o exemplo também.

6
  • Sim, na parte de adicionar e remover classe é isso mesmo, me ajudou muito já, agora se não for pedir demais, como ficaria para clicar e enviar o id para um input, exemplo: pastebin.com/8grM16Ji Obrigado amigo.
    – Raank
    4/03/2014 às 15:04
  • @Feera Atualizei a resposta, olhando sua questão inicial fiz o do 'input' no mapa. Qualquer coisa comenta. 4/03/2014 às 16:07
  • Isso é para um formulário de representantes, ai a pessoa clica no estado dela e adiciona o estado no input, é assim mesmo, muito obrigado cara, fico agradecido por isso, abraço forte pra ti.
    – Raank
    4/03/2014 às 16:08
  • @Feera, não sei se é open, mais esse svg você fez ou encontrou em algum lugar? É que mais tarde eu vou necessitar de algo parecido, só que não só no Brasil, mas de toda a America Latina. 4/03/2014 às 16:12
  • Eu achei ele na internet, no site commons.wikimedia.org Mas procurei um exemplo para você, vê se esse te ajuda: commons.wikimedia.org/wiki/File:Southamerica_blue.svg Abraço
    – Raank
    4/03/2014 às 16:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .