jQuery: An- und Ausschalter programmieren mit einer Variablen Programmieren?

Ich muss folgende Aufgabe lösen:

"Beim Überfahren des großen Bildes wird die Grafik „bild1.jpg“ gegen die Grafik „bild2.jpg“ ausgetauscht – beim Verlassen des Bildes wird die ursprüngliche Grafik wieder angezeigt.

Dieses Austauschen funktioniert aber nur, wenn zuvor der Ausschalter mit einem Klick „angeschaltet“ wurde – Grafiktausch mit Datei „schalterein.png“. Wird der Schalter wieder ausgeschaltet, dann geht auch die Mouseover-Funktionalität nicht mehr. Wichtig: Arbeiten Sie mit einer Variablen namens schalter."

Bei dem Schalter handelt es sich um ein Image und keinen Button.

Der erste Teil der Aufgabe - der Grafiktausch beim Hovern - ist kein Problem.

Den Schalter bekomme ich aber nicht programmiert. In anderen Aufgaben haben wir immer einen separaten An- und Ausschalter programmiert, bisher nicht beides zusammen und ich komme einfach nicht auf eine Lösung.

Bisher habe ich nur den Anschalter programmiert (kann natürlich falsch sein):

var Schalter=0;

$("img:eq(2)").click(function (){ Schalter=1; $("img:eq(2)").attr("src","schalterein.png"); })

Wenn man wieder auf das Schalter img klickt soll der Schalter=0 werden, das Bild soll sich wieder ändern & somit wäre er ausgeschaltet.

Ob der Schalter auf 0 oder 1 steht dient zur Abfrage um den Hover Effekt/ Grafiktausch zu aktivieren bzw. deaktivieren.

Kann auch sein, dass mein Ansatz total falsch ist. Ich hoffe jemand kann mir hier weiterhelfen.

Answer 1

[rmnstr]

Die Variable schalter sollte ein boolscher Ausdruck sein (true oder false), der angibt, ob der Schalter ein (true) oder aus (false) ist.

Beim Klick auf irgendein Objekt (vermutlich ein Bild) mit der Klasse "schalter" änderst du dann die Variable schalter auf entweder true oder false (je nachdem, was es vorher war). Außerdem ändert sich das Bild auf "schalterein.png".

Dann fügst du beim Bild (hier mit der Klasse "image") noch einen hover Handler hinzu, der Funktionen beim mouse-enter und mouse-leave ausführt.

Wenn ihr noch ein Bild für den ausgeschalteten Schalter habt (geht nicht aus der Angabe hervor), dann musst du das beim Klick auf "schalter" noch einbauen.

var schalter = false;

$("#schalter").click(
  function() {
    schalter = !schalter;
    $("#schalter").attr("src", "schalterein.png");
  }
);

$("#image").hover(
  function() {
    if (schalter) {
      $("#image").attr("src", "bild2.png");
    }
  },
  function() {
    if (schalter) {
      $("#image").attr("src", "bild1.png");
    }
  }
);

Answer 2

[derobert]

Viel einfacher:

Gib dem bild eine x-belibige klasse nennen wir sie ".unwichtig" (diese ist für den weiteren verlauf eigendlich unwichtig).
Mit dem schalter (on click) toggelst (hinzufügen/entfernen) du eine weitere klasse des bildes, nenne sie ".wichtig". Dein hover effekt legst du auf die klasse .wichtig ( .wichtig:hover{...} ). Mit der klasse ".unwichtig" kannst du eigenschaften für das Bild festlegen welche für beide Zustände gleich sind.

Answer 3

[abbrechen]

Würde mit .hover und .leave die verschiedenen Bilder einspeisen und das Ganze in ein if else einbinden.

Was meinen die Anderen, würde das klappen?

Answer 4

[Kieselsaeure]

Simpel.. beim hover rufst du am besten eine funktion auf die deinen gewünschten effekt auslöst. in diese funnktion baust du allerdings ala allererstes die abfrageeein ob die public var "schalter" -insofern du diese als bool benutzt- true ist. nur wenn ja löst du dann deinen effekt aus. den schalter aus oder ein schalten kannst du über ne andere funktion und onclick methode (y)

Answer 5

[yujieas]

mach aus der var schalter eine boolische variable. lege onclick drauf, welches von true auf false und umgekehrt wechselt. bei den hover effekten fragst du nach if(schalter) { ersetzte das Bild mit dem anderen }

oder komplett mit jQuery mit dem .toggle() event. einfach mal danach googlen.