Warum fügt Jquery Inline-Stile zu meinem HTML-Code hinzu?
Ich verwende CSS, um eine Radiogruppe wie folgt neu zu gestalten:
Es wird getan, indem die eigentliche Eingabe (die Schaltfläche) innerhalb des Label-Tags verschachtelt wird und dann die Eingabe selbst auf display:none im CSS gesetzt wird und das Label selbst so formatiert wird, dass es zur Schaltfläche wird:
Es kann alles mit CSS gemacht werden ... aber da einige Browser (ich schaue auf dich, IE8 und darunter) die :checked Pseudoklasse nicht erkennen, tue es so, dass deine tatsächliche Eingabe - was ist, was wird den Wert aus dem Formular übergeben - registriert nicht immer, dass es überprüft wird, so JQuery zur Rettung.
Ich benutze nun JQuery, um addClass ".amClicked" zu setzen, wenn auf eines der Labels geklickt wird. Zu diesem Zeitpunkt schaltet es auch das "checked" Attribut des Funkgeräts auf "true" und entfernt die Klasse "amChecked" aus dem Geschwister. Einfach richtig? Hier ist dieser JQuery-Code:
%Vor% Nun, es wäre, außer dass JQuery aus irgendeinem Grund höllisch geneigt ist, meinem <input> , das mein display: none; überschreibt und das Radio-Button selbst versteckt, mein "counter" -Inline-Tag hinzuzufügen , wie # 3 unten:
Und so sieht der Eingabecode nach einem Klick aus:
%Vor% Schlimmer noch, das Hinzufügen von .css("display","none") zu meinem Klickcode (wie Sie oben sehen) überschreibt ihn nicht - der Button wird immer noch angezeigt. Wenn ich es nicht zur removeClass-Zeile hinzufüge, bleibt diese Schaltfläche einfach unmarkiert:
SO - kann mir jemand sagen, warum JQuery dies ungebeten meinem Code hinzufügt, und kann ich irgendetwas tun, um es zu stoppen oder zu überschreiben? Jede Hilfe würde sehr geschätzt werden!
2 Antworten
Verwenden Sie CSS, um die Radioeingaben display festzulegen, und ändern Sie sie nicht mit jQuery.
Um das Attribut "checked" umzuschalten, weisen Sie ihm den Wert "checked" zu. Um "uncheck" zu entfernen, entfernen Sie das Attribut.
%Vor%Ich habe es in diese Geige geworfen.
Aus meiner Erfahrung wird jQuery immer Stile inline pushen. Es beeinflusst Elemente, nicht die definierten Stylesheets. Es weiß nur, dass das Element existiert, weil Sie es auf dieses Element gerichtet haben.
Außerdem würde ich das Radio nicht in das Etikett stecken. Das könnte das Problem verursachen.
In Ihrem Stylesheet oder wo auch immer Ihre Stile definiert sind:
%Vor% Warum nicht eine Klasse mit display:none; anstelle von .css() verwenden? .addClass('hidden') ., .removeClass('hidden') sollte funktionieren.
Dann können Sie das wo immer verwenden.
Ich werde in der Zwischenzeit eine Geige bauen, um zu testen.
BEARBEITEN Hier ist eine Geige. Eigentlich fing gerade an, deine jQuery anzusehen. Ich bin mir nicht sicher, ob ich sehe, was das beabsichtigte Ergebnis ist? Sie möchten nur auf ein Element klicken und es ändert das Radio, richtig?
Bei Optionsfeldern müssen Sie nichts festlegen, um sie nicht auszuwählen. Sie werden die Auswahl selbst aufheben.
Wenn Sie einen versteckten Wert anstelle von display: none; radio-Werten einrichten, werden Sie nicht auf Probleme stoßen, die in den Kommentaren der Frage erwähnt werden. Dann legen Sie einfach eine Funktion fest, um den Wert des ausgeblendeten Werts basierend auf einem Attribut des angeklickten Elements zu ändern.