jQuery 이미지 선택기 IE7에서 작동하지 않습니다

Question

그래서 나는 같은 html을 가지고 있습니다.

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

그리고 일부 대본 :

$('#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');
});

목표는 사용자가 이미지 옵션을 클릭하여 선택한 하이라이트를 테두리 색상으로 클릭 할 수 있도록하는 것입니다.

이것은 FF에서 잘 작동합니다. IE에서 어떤 이유로 이미지를 클릭하면 다른 이미지를 클릭 한 다음 첫 번째 이미지를 클릭하십시오. 첫 번째 이미지를 클릭하면 테두리가 변경되지 않습니다 (선택되지만).

편집 : 내 솔루션은 우연히 절반이 발생했습니다. Redsquare의 답변으로 인해 코드를 변경했습니다.

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

어디:

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

그림을 이동.

Answer 1

이 시나리오에서 AddClass 및 RemoveClass를 사용하는 것이 가장 좋습니다. 유지하기가 더 쉽습니다. DocType 등을 볼 수 있도록 전체 HTML을 붙여 넣을 수 있습니까?