Frage

Also ich habe einige html wie folgt:

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

Und einige Skript:

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

Das Ziel ist, dem Benutzer klicken um auf das Bild Optionen zu ermöglichen, mit einem Rahmenfarbe des ausgewählten Highlight haben.

Das funktioniert in FF in Ordnung. einmal aus irgendeinem Grund in IE ich auf ein Bild klicken, um ein anderes Bild klicken, dann versuchen Sie den ersten klicken, wird die Grenze nicht ändern (obwohl es ausgewählt bekommt).

EDIT: Meine Lösung endete Hälfte zufällig geschieht. Ich änderte den Code dies aufgrund redsquare Antwort:

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

Dabei gilt:

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

So ist das.

War es hilfreich?

Lösung

beste addClass und removeClass in diesem Szenario verwenden. Leichter zu pflegen. Können Sie Ihre vollständige HTML einfügen, damit ich Ihre Doctype etc

sehen
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top