مسج صورة محدد لا يعمل في IE7

Question

ولذا فإن لدي بعض أتش تي أم أل مثل ذلك:

<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 الخ