F�rum D�vida com $(this) em JQuery #521478

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

Curtir t�pico

+ 0

Responder

Posts

15/06/2015

F�bio F.

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.

Responder

Gostei + 0

15/06/2015

Italo Pereira

Entendi, gostei mais da primeira forma mesmo.

Obrigado pela ajuda.

Abra�o.

Responder

Gostei + 0