Pergunta

Então, eu tenho alguns html assim:

<div id="avatar_choices">
    <label for="id_choice_0">
        <input id="id_choice_0" type="radio" name="choice" value="7" />
        <img src="someimage.jpg" />
    </label>
    <label for="id_choice_1">
        <input id="id_choice_1" type="radio" name="choice" value="8" />
        <img src="someimage2.jpg" />
    </label>
</div>

E alguns script:

$('#avatar_choices input').hide();
$('#avatar_choices img').click(function(){
    $('#avatar_choices img').css('border', '2px solid #efefef');
    $(this).css('border', '2px solid #39c');
    $(this).siblings('input').attr('checked', 'checked');
});

O objetivo é permitir que o usuário clicar em torno das opções de imagem, tendo o selecionado um destaque com uma cor de borda.

Esta multa funciona no FF. Por alguma razão, no IE, uma vez que eu clicar em uma imagem, clique em outra imagem, em seguida, tentar clicar a primeira, a fronteira não vai mudar (embora ele não se selecionado).

EDIT: Minha solução acabou acontecendo meio por acaso. Mudei o código para isso devido à resposta de redsquare:

$('#avatar_choices input').hide();
$('#avatar_choices img').click(function(){
    $('#avatar_choices img').removeClass('selected');
    $(this).addClass('selected');
    $(this).siblings('input').attr('checked', 'checked');
});

Onde:

#avatar_choices img.selected{border:2px solid #39c;}

Go figura.

Foi útil?

Solução

melhor usando addClass e removeClass neste cenário. Mais fácil de manter. você pode colar o HTML completo para que eu possa ver o seu doctype etc

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top