Wie kann ich dem JavaScript in diesem HTML-Code mitteilen, dass es nicht alle Schaltflächen beeinflusst? ⇐ CSS

[Anonymous]

Ich habe eine HTML-Website mit Bootstrap und jQuery erstellt. Ich wollte, dass ein Button seinen Beschriftungstext und sein Design abhängig von einer booleschen Variablen ändert. Das hat mit JavaScript funktioniert, aber ich habe diesen Button (in Grün und Blau) überall auf der Seite. Jetzt werden entweder alle Schaltflächen grün oder alle Schaltflächen grün angezeigt.
Hier ist ein Beispiel dafür, was ich mit zwei Schaltflächen meine:

Code: Select all

[b][/b]


var open = true;

if (open) {
$(".alert").addClass("alert-success");
$(".alert").removeClass("alert-danger");
$(".alert").html("[b]Geoeffnet[/b]");
} else {
$(".alert").removeClass("alert-success");
$(".alert").addClass("alert-danger");
$(".alert").html("[b]Geschlossen[/b]");
};



[b][/b]


var open = false;

if (open) {
$(".alert").addClass("alert-success");
$(".alert").removeClass("alert-danger");
$(".alert").html("[b]Geoeffnet[/b]");
} else {
$(".alert").removeClass("alert-success");
$(".alert").addClass("alert-danger");
$(".alert").html("[b]Geschlossen[/b]");
};

Wie kann ich verhindern, dass diese beiden Schaltflächen immer die gleichen Funktionen haben?