Return image value

Navigation
0

I have this html code: 

<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>

I wanted the div below to show the value of the images above (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);
 });
});

I do not know how I do this: /

jsfiddle code: link

asked by anonymous 03.09.2015 / 22:13

2 answers

2

I do not know exactly why it did not work but I suspect it is because the img tag does not work with the value attribute. This attribute is used in form elements. So if you change .val() to .attr("value") it will solve.

Fiddle

But the correct thing is to use data attributes, example: 

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

And then to access the attribute: 

$(this).data("game")

Fiddle

About the effect of the images, I would suggest you use this selector: 

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

So you do not run this animation on all the images, only those that were not clicked.

Fiddle

    
03.09.2015 / 22:18
2

You have to get the "src" attribute of the image with jQuery .attr, follow the code:

link 

$(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);
    });

});
    
03.09.2015 / 22:31
Copy file from local computer to remote via terminal Is there any way to define a random order by order for an already established order?