Le sélecteur d'image jQuery ne fonctionne pas dans IE7

Question

J'ai donc du HTML comme ça:

<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 sur les options d’image, en sélectionnant l’option sélectionnée surlignée avec une couleur de bordure.

Cela fonctionne bien en FF. Pour une raison quelconque dans IE, une fois que je clique sur une image, clique sur une autre image, puis essaie de cliquer sur la première, la bordure ne changera pas (même si elle est sélectionnée).

EDIT: Ma solution a fini par arriver à moitié par accident. J'ai changé le code en cela 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;}

Allez comprendre.

Answer 1

est préférable d'utiliser addClass et removeClass dans ce scénario. Plus facile à maintenir. Pouvez-vous coller votre code HTML complet afin que je puisse voir votre doctype, etc.