Ich habe einem Element eine Klasse zugewiesen, die folgendes CSS hat:

.cls {
  display:none !important;
}

Wenn ich versuche, dieses Element mit jQuery anzuzeigen

$(".cls").show();

Es funktioniert nicht.

Wie kann ich dieses Element anzeigen?

$('.cls').attr('style','display:block !important');

DEMO

Obwohl die Frage schon lange gestellt wurde, ist sie für neue Programmierer / Anfänger immer noch relevant. Im Allgemeinen tritt diese Situation auf, wenn Sie bereits eine Klasse angewendet haben, die die überschreibt display Verhalten verwenden !important Eigentum.

Andere Antworten sind auch für die Frage relevant und es geht darum, dasselbe Ziel mit einem anderen Ansatz zu erreichen. Ich würde empfehlen, dies mit bereits verfügbaren Klassen in derselben Bibliothek (Bootstrap hier) zu erreichen, anstatt benutzerdefinierte Klassen zu schreiben, wie sie heutzutage von den meisten von uns verwendet werden Bootstrap-Klassen um das Layout zu bauen.

<div id='container' class="d-flex flex-row align-items-center">
.....
</div>

Wenn Sie im obigen Code sehen, verwenden wir d-flex Klasse zum Festlegen der Anzeigeeigenschaft dieses Containers. Nun, wenn ich es versuche show/hide diesen Container verwenden

$('#container').show()

oder

$('#container').hide()

Es wird nicht wie erwartet funktionieren, weil

1. Als d-flex verwendet bereits !important Eigentum
2. Jquerys show() Methode wird hinzugefügt display:block nicht display:flex in die CSS-Eigenschaft des Containers.

Daher werde ich die Verwendung empfehlen hidden Klasse hier.

Container zeigen

$('#container').removeClass('hidden')

Behälter zu verstecken

$('#container').addClass('hidden')

2 Möglichkeiten, dies zu tun,

1) Entfernen Sie die !important von deiner .cls Klasse,

.cls{
   display: none;
}

Aber ich nehme an, Sie hätten dies an anderer Stelle verwendet, sodass es zu einer Regression führen könnte.

2) Was Sie alternativ tun könnten, ist, eine andere Klasse zu haben und diese umzuschalten,

.cls-show{
  display: block !important;
}

Und dann in Ihrem Javascript,

$('.cls').addClass(".cls-show");

Wenn Sie es dann wieder ausblenden müssen, können Sie

$('.cls').removeClass('.cls-show');

Dies hilft Ihnen, Ihr Markup sauber und lesbar zu halten

!wichtig; Entfernen Sie alle Regeln und wenden Sie das CSS an, das als definiert ist !wichtig;. In Ihrem Fall ignoriert es also alle Regeln und wendet sie an Anzeige: keine.

Also mach das:

.cls {
  display:none
}

Siehe dies auch

Wenn die einzige Eigenschaft im CLS-Klassenselektor die Anzeige ist, können Sie dies tun und müssen keine zusätzlichen Klassen hinzufügen oder den Inline-Stil ändern.

Um sie zu zeigen:

$('.cls').removeClass("cls").addClass("_cls");

Um sie auszublenden:

$('._cls').removeClass("_cls").addClass("cls");

Hatte gerade genau dieses Problem, hier ist, was ich zuerst getan habe, ich habe dem Element eine weitere Klasse hinzugefügt, wie zum Beispiel:

<div class="ui-cls cls">...</div>

Dann im Javascript:

$('.ui-cls').removeClass('cls').show();

Das Schöne ist, dass Sie diesen Code auch haben können, um ihn wieder auszublenden:

$('.ui-cls').hide();

und es spielt keine Rolle, wie oft Sie sich verstecken/zeigen, es wird immer noch funktionieren