jQuery Klick Klassenänderung IE Seltsamkeit

Question

Ich kann versuchen, auf diesem einen zu extravagant zu werden.

Ich habe ein Paar radioähnliche Tasten in einer Reihe mit einer Trennlinie zwischen ihnen mit Hintergrundbildern. Wenn einer der "Knöpfe" angeklickt wird, ändere ich seine Klasse. Das CSS für den Teiler ist mit den Klassen der Schaltflächen auf jeder Seite verknüpft, um ein Hintergrundbild auszuwählen. Ich mache das mit CSS 'Geschwister' Selektoren.

Ich habe jQuery. Click-Ereignisse an die "Schaltflächen" gebunden. Das erste, was sie tun, ist, die 'ausgewählte' Klasse von der anderen Schaltfläche zu löschen und sie auf die Schaltfläche zu setzen, auf die geklickt wurde.

Wenn zum Beispiel die LINKE Schaltfläche class = 'selected' ausgewählt ist und die RIGHT-Taste nicht gedrückt wird, wird der Teiler zwischen ihnen blau hinterlegt. Klicken Sie auf die Schaltfläche RECHTS, und es wird class = "ausgewählt", während die LEFT-Schaltfläche deaktiviert ist. Der Teiler wird rot.

Dies funktioniert in IE, FF, Safari, etc. Aber IE ist ungerade (IE7) - es wird nur die Teiler Hintergrund ändern, wenn ich Maus die Taste, die ich geklickt habe! Das heißt, im Beispiel wird die Schaltfläche RECHTS class = 'ausgewählt' und ändert sich sofort beim Klicken. Aber der Teiler bleibt blau, bis ich den Knopf loslasse, dann wird er rot.

Die Klasse selbst ändert sich und das Aussehen der Schaltfläche ändert sich dadurch. Es sind nur die benachbarten Sachen, die das nicht tun !?

Es erinnert mich an meine alten VB6-Tage, als Sie in regelmäßigen Abständen "DoEvents" aufrufen mussten, um Windows dazu zu bringen, Änderungen an der Benutzeroberfläche vorzunehmen. Könnte es hier etwas ähnliches für IE geben?

Answer 1

Ich habe keine Ahnung, warum das hilft, aber das Hinzufügen von .hide(). Show() zu einem Selektor, der das Zeug enthält, das die Klasse geändert hat, scheint es zu aktualisieren.

Answer 2

Ich habe gelesen, dass die Verwendung von SetAttribute, um die Klasse zu ändern, IE7 zum Rendern der Stile erzwingt. Versuchen Sie das mal, und wenn es noch nicht, ich habe ein ähnliches IE7 Problem gelöst, indem die HTML-Umschreiben, die IE7 gezwungen, neu rendern (mit Jquery):

if ($("html").hasClass("ie7")){ 
    var tempHolder = $("#ajaxresults").html(); 
    $("#ajaxresults").html(tempHolder); 
} 

Was gibt den HTML oder Body-Tag des IE7-Klasse, empfehle ich einen Blick auf html5boilerplate.com. Wenn Sie aus irgendeinem Grund ihre Lösung nicht verwenden können, ist die JQuery dafür:

if ($.browser.msie){ 
     if ($.browser.version < 8){ 
      $("html").addClass("ie ie7"); 
     } 
     else { 
      $("html").addClass("ie"); 
     } 
    }