sélecteur d'image jquery ne fonctionne pas dans IE7

Question

J'ai quelques html comme ceci:

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

Et un 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'); 
}); 

L'objectif est de permettre à l'utilisateur de cliquer autour sur les options d'image , ayant la surbrillance sélectionnée avec une couleur de bordure.

Cela fonctionne très bien dans FF. Pour une raison quelconque dans IE une fois que je clique sur une image, cliquez sur une autre image, puis essayez de cliquer sur la première, la bordure ne changera pas (bien qu'elle soit sélectionnée).

EDIT: Ma solution a fini par se produire moitié par accident. J'ai changé le code à ce en raison de la réponse 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'); 
}); 

où:

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

Go figure.

Answer 1

en utilisant addClass et removeClass dans ce scénario. Plus facile à entretenir. Pouvez-vous coller votre html complet pour que je puisse voir votre doctype etc