Dúvida com $(this) em JQuery

Front-end

31/05/2015

oi pessoal,

tenho uma página html com 5 imagens:
<a href="#"><img id="mini1" class="imagem_selecionada" src="images/modelos/s_quarto1.jpg" onclick="mudaPrincipal();"/></a>
	<a href="#"><img id="mini2" src="images/modelos/s_quarto2.jpg" onclick="mudaPrincipal();"/></a>
	<a href="#"><img id="mini3" src="images/modelos/s_quarto3.jpg" onclick="mudaPrincipal();"/></a>
	<a href="#"><img id="mini4" src="images/modelos/s_quarto4.jpg" onclick="mudaPrincipal();"/></a>
	<a href="#"><img id="mini5" src="images/modelos/s_quarto5.jpg" onclick="mudaPrincipal();"/></a>


quero que, ao clicar em uma delas, a classe "imagem_selecionada" passe para a imagem clicada.

meu arquivo js está assim:
function mudaPrincipal(){
	$("[id^=mini]").removeClass("imagem_selecionada"); //funciona apagando a classe "imagem_seleciona"
	$(this).addClass("imagem_selecionada"); //nao inclui a classe na imagem clicada (como se o 'this' nao funcionasse)
}


alguem pode me ajudar?
Italo Pereira

Italo Pereira

Curtidas 0

Respostas

Fábio F.

Fábio F.

31/05/2015

Olá, bom dia.
O problema com a this é que só funciona para um elemento, propriedade, função ou aplicação que esteja contida na sua linguagem.
Quero dizer, você não pode usar this do jquery pra se referir a algo html. this vai se referir a algo que onde ele está contido, mas neste caso no jquery.
Vou te dar um exemplo, vou fazer este código como eu criaria, analise as formas, a primeira seria com o this pra facilitar.

    <a href="#"><img class="mini imagem_selecionada" src="images/modelos/s_quarto1.jpg"/></a>
    <a href="#"><img class="mini" src="images/modelos/s_quarto2.jpg" /></a>
    <a href="#"><img class="mini" src="images/modelos/s_quarto3.jpg" /></a>
    <a href="#"><img class="mini" src="images/modelos/s_quarto4.jpg" /></a>
    <a href="#"><img class="mini" src="images/modelos/s_quarto5.jpg" /></a>
<script type="text/javascript">
    $(document).ready(function () {
        $(".mini").click(function () {  // Esta linha é referência para o que está abaixo então...
            $(".mini").removeClass("imagem_selecionada"); // Essa linha vai remover de todas as classes mini
            $(this).addClass("imagem_selecionada"); // Esta linha funciona porque está contida dentro do .click
        });
    });
</script>


Tente desta forma depois me responda.
Mas se caso queira tentar passar qual é a this, então tente fazer desta forma.


    <a href="#"><img id="mini1" class="imagem_selecionada" src="images/modelos/s_quarto1.jpg" onclick="mudaPrincipal('mini1');"/></a>
    <a href="#"><img id="mini2" src="images/modelos/s_quarto2.jpg" onclick="mudaPrincipal('mini2');"/></a>
    <a href="#"><img id="mini3" src="images/modelos/s_quarto3.jpg" onclick="mudaPrincipal('mini3');"/></a>
    <a href="#"><img id="mini4" src="images/modelos/s_quarto4.jpg" onclick="mudaPrincipal('mini4');"/></a>
    <a href="#"><img id="mini5" src="images/modelos/s_quarto5.jpg" onclick="mudaPrincipal('mini5');"/></a>
    function mudaPrincipal(valor){
        $("[id^=mini]").removeClass("imagem_selecionada"); //funciona apagando a classe "imagem_seleciona"
        $("#"+valor).addClass("imagem_selecionada"); 
    }


São duas formas que dão certo, mas esta segunda faz com que o código fique exageradamente grande.
Então indico que escolha usar mais da primeira forma.
Só que como eu não testei aqui, peço que tente aí e depois me fale pra eu ver se existe algum erro.
GOSTEI 0
Italo Pereira

Italo Pereira

31/05/2015

Entendi, gostei mais da primeira forma mesmo.

Obrigado pela ajuda.

Abraço.
GOSTEI 0
POSTAR