Nehmen mehr CSS-Klassen auf einem HTML-Elemente (jQuery addClass)

HTML Gegeben:Nehmen mehr CSS-Klassen auf einem HTML-Elemente (jQuery addClass)

<html> 
<head> 
    <style type="text/css"> 
    tr.Class1 
    { 
     background-color: Blue; 
    } 
    .Class2 
    { 
     background-color: Red; 
    } 
    </style> 
</head> 
<body> 
    <table> 
    <tr id="tr1"> 
     <td>Row 1</td> 
    </tr> 
    <tr id="tr2"> 
     <td>Row 2</td> 
    </tr> 
    </table> 
</body> 
</html>

Im Folgenden finden Sie das Skript secion. Was passiert, wenn ich auf die erste Zeile klicke? Bleibt es blau oder wird es rot? Wenn es blau bleiben soll, wie bekomme ich es stattdessen rot, OHNE dass ich die Class1-Klasse aus der Reihe entferne (damit ich die Class2-Klasse später entfernen kann und die Reihe in ihre ursprüngliche blaue Farbe zurückkehrt)?

<script type="text/javascript" language="javascript"> 

    $(document).ready(function() { 
    $("#tr1").addClass("Class1"); 

    $("tr").click(function() { 
     /* clicked tr's should use the Class2 class to indicate selection, but only one should be selected at a time */ 

     $(".Class2").removeClass("Class2"); 
     $(this).addClass("Class2"); 
    }); 
    }); 

</script>

bearbeiten soll ich sagen - ich dies versucht, und es ist nicht wie erwartet funktioniert (entweder in FireFox oder IE). Was ist los?

Quelle

2009-04-16 Brandon Montgomery

Es wird rot für mich, wie erwartet, mit Ihrem Code oben. Wenn es nicht für Sie funktioniert, haben Sie anderen Code oder Regeln interagieren, die wir nicht sehen können. – bobince

-2

Ich habe es herausgefunden. Ich habe mein Beispiel falsch dargestellt. Die CSS sah tatsächlich wie:

tr.Class1 
{ 
    background-color: Blue; 
} 
.Class2 
{ 
    background-color: Red; 
}

Daher ist die spezifischste Regel gilt, genau wie Mozilla mir here gesagt:

Wenn die gleiche Eigenschaft in beiden Regeln erklärt wird, wird der Konflikt gelöst zuerst durch Spezifität, dann gemäß der Reihenfolge der CSS Deklarationen. Die Reihenfolge der Klassen in Das Klassenattribut ist nicht relevant.

Quelle

2009-04-16 17:09:15

Es sollte rot werden ... deshalb heißt es cascading Stylesheets ... neue Zusätze zu den Eigenschaften überschreiben ältere.

Quelle

2009-04-16 15:37:03

Ich weiß, aber ich bekomme dieses Verhalten nicht. –

Mozilla sagt here:

Wenn die gleiche Eigenschaft in deklariert beiden Regeln wird der Konflikt zunächst durch Spezifität aufgelöst, dann nach der Reihenfolge der CSS Erklärungen. Die Reihenfolge der Klassen in Das Klassenattribut ist nicht relevant.

Aber das ist nicht das Verhalten, das ich bekomme.

Quelle

2009-04-16 15:43:28

versuchen Sie dies:

$("tr").click(function() { 
    /* clicked tr's should use the Class2 class to indicate selection, but only one should be selected at a time */ 

    $(".Class2").removeClass("Class2"); 
    $(this).toggleClass("Class1"); 
    $(this).addClass("Class2"); 
    $(this).toggleClass("Class1"); 
});

Ich weiß nicht, ob es funktionieren wird, aber vielleicht wird es Ihnen mehr in das Problem.

Quelle

2009-04-16 16:00:29 thirsty93

Nehmen mehr CSS-Klassen auf einem HTML-Elemente (jQuery addClass)

Antwort

Verwandte Themen