Stylen von Admin-Seitenzeilen in der Reihenfolge ihrer Wichtigkeit (Kontrollkästchen)

Ich ändere den Admin-Bereich eines Plugins und füge ein Kontrollkästchen für eine “Coming Soon” -Option hinzu. Wenn der Benutzer jetzt das Kontrollkästchen “In Kürze” aktiviert, wird die gesamte Zeile grün, aber es gibt auch die Option, die gesamte Zeile zu löschen. Wenn das Kontrollkästchen Löschen aktiviert ist, wird die Zeile rot angezeigt.

Das Problem, das ich habe, ist, wenn die Checkbox “Bald kommen und löschen” aktiviert ist, die Zeile wird nur grün. Ich möchte, dass die Reihe rot wird, egal ob das Feld “Bald kommen” aktiviert ist oder nicht.

Admin-Skript.php

//Styles rows clicked for deletion function showStriked(){ jQuery("#cqrm-current-item-list input[type=checkbox].strike").each(function() { if( jQuery(this).attr("checked")){ jQuery(this).closest('tr').addClass("cue-deletion"); } else{ jQuery(this).closest('tr').removeClass("cue-deletion"); } }); } showStriked(); jQuery(".strike").click(showStriked); //Styles rows clicked for Comingsoon function showComingsoon(){ jQuery("#cqrm-current-item-list input[type=checkbox].comingsoon").each(function() { if( jQuery(this).attr("checked")){ jQuery(this).closest('tr').addClass("cue-comingsoon"); } else{ jQuery(this).closest('tr').removeClass("cue-comingsoon"); } }); } showComingsoon(); jQuery(".comingsoon").click(showComingsoon); 

admin.css

 #cqrm-current-item-list tr.cue-deletion, #cqrm-current-item-list tr.cue-deletion *{ background-color: #fbb !important; filter: alpha(opacity=100) !important; } #cqrm-current-item-list tr.cue-comingsoon, #cqrm-current-item-list tr.cue-comingsoon *{ background-color: #9F9 !important; filter: alpha(opacity=100) !important; } 

Modus-edit.php

 <input type="checkbox" class="comingsoon"  name="itemcomingsoon[]" value="checked"/> <input type="checkbox" class="strike" name="strike[]" value="checked"/> 

Solutions Collecting From Web of "Stylen von Admin-Seitenzeilen in der Reihenfolge ihrer Wichtigkeit (Kontrollkästchen)"

Das Problem, das Sie sehen, ist, dass Sie Ihre Erklärungen von einem CSS-Standpunkt aus gleich wichtig sind.

Wenn Sie einen anderen Stil hinzufügen, um ihn stärker zu bevorzugen:

 #cqrm-current-item-list tr.cue-deletion.cue-coming-soon, #cqrm-current-item-list tr.cue-deletion.tr.cue-coming-soon *{ 

Hintergrundfarbe: #fbb! wichtig; Filter: Alpha (Opazität = 100)! wichtig; }

Oder verschieben Sie die Cue-Deletion unterhalb der Cue-Comingsoon-Deklaration, die Dinge sollten wie gewünscht funktionieren.

In CSS hat # (id) eine Größenordnung von etwa 100,. (class) hat eine Größenordnung von etwa 10, und ein Tag hat eine Größenordnung von etwa 1 …

Spätere Deklarationen mit gleichem oder höherem Gewicht überschreiben die früheren.

Wenn Sie Ihre beiden Erklärungen betrachten, haben sie beide

 #(id) tr(tag).(class) 

Das bedeutet, sie haben ein gleiches Gewicht von etwa 100 + 1 + 10

Wenn Sie eine genauere (wie oben gezeigt) machen, erhalten Sie ein zusätzliches Gewicht von 10 und überschreiben das andere. Wenn Sie das Wichtigste später als das Geringere festlegen, sollte dies den gleichen Effekt haben, da es den anderen überlagert.