il selettore di immagini jquery non funziona in IE7

Question

Quindi ho alcuni HTML in questo modo:

<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 alcuni 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'obiettivo è consentire all'utente di fare clic sulle opzioni dell'immagine, evidenziando quella selezionata con un colore del bordo.

Funziona bene in FF. Per qualche motivo in IE dopo aver fatto clic su un'immagine, fare clic su un'altra immagine, quindi provare a fare clic sul primo, il bordo non cambierà (anche se viene selezionato).

EDIT: La mia soluzione è finita per metà accadendo per caso. Ho cambiato il codice in questo grazie alla risposta di redsquare:

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

dove:

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

Vai a capire.

Answer 1

utilizzare meglio addClass e removeClass in questo scenario. Più facile da mantenere. Riesci a incollare il tuo HTML completo in modo che io possa vedere il tuo doctype ecc.