0

Eu tenho este código html:

<label>
     <img class="jogo" value="lol" src="../cdn/img/jogos/lol.png">
     <img class="jogo" value="csgo" src="../cdn/img/jogos/csgo.png">
</label>
<br><div class="atual"> </div>

Eu queria que no div debaixo mostrasse o valor das imagens em cima ( lol /csgo )

$(function(){
 $(".jogo").click(function(){

    $(".jogo").animate({opacity:0.5},{duration:100});
    $(this).animate({opacity:1},{duration:100});
    var jogo = $(this).val();
    $(".atual").html(jogo);
 });
});

Não sei como que faço isso :/

Codigo jsfiddle: http://jsfiddle.net/xj1L52h3/

______________________________________________

Editado

Estou com outra duvida, eu queria fazer com que, quando clicasse em 1 das imagens aparecesse um menu e quando clicasse na outra, desaparecesse o que ja lá estava e aparecesse outro.

http://jsfiddle.net/xj1L52h3/7/

2 Respostas 2

2

Não sei exatamente porque não funcionou mas suspeito que seja porque a tag img não trabalha com o atributo value. Esse atributo é usado em elementos de formulário. Então se você trocar o .val() para .attr("value") vai resolver.

Fiddle

Mas o correto nesse caso é utilizar os atributos data, exemplo:

<img class="jogo" data-game="lol" src="../cdn/img/jogos/lol.png" />
<img class="jogo" data-game="csgo" src="../cdn/img/jogos/csgo.png" />

E então para acessar o atributo:

$(this).data("game")

Fiddle

Sobre o efeito da imagens, eu gostaria de sugerir que você usasse esse seletor:

$(".jogo").not(this).animate({opacity:0.5},{duration:100});

Pois assim você não executa esta animação em todos as imagens, apenas nas que não foram clicadas.

Fiddle

4
  • Funcionou perfeitamente, pensei a mesma coisa sobre a tag img não trabalhar com o value, mas n sabia como resolver. Obrigado :)
    – xdam98
    Commented 3/09/2015 às 20:21
  • Editei ali o tópico, tem como me dar uma ajuda?
    – xdam98
    Commented 3/09/2015 às 20:52
  • @xdam98 jsfiddle.net/xj1L52h3/8 Commented 3/09/2015 às 21:05
  • Obrigado, deu tudo certo.
    – xdam98
    Commented 3/09/2015 às 21:18
2

Você tem que pegar o atributo "src" da imagem com o .attr do jQuery, segue o código corrigo:

http://jsfiddle.net/bxcvahko/2/

$(function(){

    $(".jogo").click(function(){

        $(".jogo").animate({opacity:0.5},{duration:100});
        $(this).animate({opacity:1},{duration:100});
        var jogo = $(this).attr('src');

        jogo = jogo.slice(jogo.lastIndexOf('/') + 1, jogo.length);
        jogo = jogo.split('.')[0];

        $(".atual").html(jogo);
    });

});
2
  • o usuario @DontVoteMeDown fez o mesmo de uma maneira mais simples. Entretanto, obrigado, esse "split" vai-me ser util no futuro :D
    – xdam98
    Commented 3/09/2015 às 20:35
  • 1
    Um regex aí melhoraria muito esse código. Commented 3/09/2015 às 20:45

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 .