addClass und removeClass funktioniert nicht im Internet Explorer

jQuery-Funktionen addClass und removeClass funktionieren nicht korrekt, wenn ich verwenden Sie Sie, ändern Sie das Aussehen des Kontrollkästchens in der Internet-Exploer (IE). Jedoch, Sie funktionieren in anderen Browsern.

Hier ist Beispielcode zu veranschaulichen mein problem:

$('input:#chkbox').click(function()
    {
        //if($(this).is(":checked")){
        if($('input:#chkbox').is(":checked"))
        {
            $('input:#chkbox').next("label").addClass("etykieta_wybrana");
        }
        else
        {
            $('input:#chkbox').next("label").removeClass("etykieta_wybrana");
        }
    });

Weiter zu testen, können Sie führen Sie den code mit jsFiddler (funktioniert nicht im IE):
http://jsfiddle.net/tejek/pZJMd/

InformationsquelleAutor Tejek | 2011-03-10
  1. 4

    Ihre Auswahl sollte entweder $('#chkbox') wenn Sie wollen, dass es funktioniert mit nur einer checkbox, die man mit der id chkbox, oder sollte es $('input:checkbox') wenn Sie wollen, dass es funktioniert mit jeder checkbox.

    Auch, es ist besser, verwenden Sie das change-Ereignis aus, anstatt das click-Ereignis, da das click-Ereignis (theoretisch) sollte nicht ausgelöst, wenn die änderung vorgenommen wurde, die durch etwas anderes als ein Mausklick.

    Vielleicht versuchen Sie so etwas wie dieses:

    $('input:checkbox').change(function () {
    var $this = $(this);
    if( $this.is(':checked') ) {
        $this.next('label').addClass('etykieta_wybrana');
    } else {
        $this.next('label').removeClass('etykieta_wybrana');
    }
});

    Sehen DEMO.

    Wenn es nicht hilft, dann versuchen Sie hinzufügen und entfernen Sie die Klassen manuell in HTML, um zu sehen, ob vielleicht das problem ist nicht das hinzufügen von Klassen, aber nicht zeigen Effekte der Zugabe der Klassen, die durch einige seltsame quirks-Modus Rendern oder so etwas.

    Stellen Sie sicher, starten Sie Ihre HTML mit etwas wie dieses:

    <!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">

    sicher sein, dass Sie immer das beste aus der IE-rendering-engine.

    • +1 Gute Punkte.
    • Vielen Dank,Jetzt komme ich, um zu wissen, wie man die meisten rendering-Problem behoben, die in IE
    InformationsquelleAutor rsp
  2. 1

    Diese Auswahl input:#chkbox scheint seltsam. Versuchen #chkbox hast du nur ein element mit der ID #chkbox (und dies geschieht, um eine <input /> Feld).

    Außerdem sollten Sie wahrscheinlich cache das Ergebnis $('#chkbox'), z.B.:

    var $chkbox = $('#chkbox');
$chkbox.click(function() {
    if ($chkbox.is(":checked")) {
        $chkbox.next("label").addClass("etykieta_wybrana");
    } else {
        $chkbox.next("label").removeClass("etykieta_wybrana");
    }
});

    Könnten Sie sogar mit .toggleClass() mit einem switch (zweites arg., ungetestet):

    var $chkbox = $('#chkbox');
$chkbox.click(function() {
    $chkbox.next("label").toggleClass("etykieta_wybrana", $chkbox.is(":checked"));
});

    Haftungsausschluss

    Nein, das erklärt nicht, warum funktionierte es in Fx, Chrome etc. und nicht in IE. Ich denke, die Selektor-Implementierung ist etwas anders zwischen den Browsern. Im Allgemeinen ist dies möglicherweise nicht selbst lösen das problem, sondern nur der Hinweis auf mögliche Probleme (und eine "sauberere" Lösung).

    InformationsquelleAutor jensgram
Schreibe einen Kommentar