Ersatz für jQuery toggle

Ab Version 1.9 ist in jQuery die Funktion toggle() nicht mehr verfügbar. Damit sind dann einfache auf- und zuklapp Funktionen nicht mehr möglich. Warum toggle() entfernt wurde ist mir nicht ganz klar, aber es lässt sich auf recht einfache Art und Weise ersetzen.

$('h4').click(function() {
  var clicks = $(this).data('clicks'),
    sibling = $(this).next();
  
  if (clicks) {
    sibling.hide();
  } else {
    sibling.show();
  }

  $(this).data('clicks', !clicks);
});

Funktionsbeschreibung

Dieser Block sorgt dafür, das bei einem Klick auf die Überschrift vom Typ h4 das folgende Element aufgeklappt wird. Der Klick wird dann in der Überschrift gespeichert. Bei einem erneuten Klick wird der Zustand ausgelesen, abhängig davon das folgende Element geschlossen und der neue Zustand dann abgespeichert.

Das lässt sich dann beliebig wiederholen.

Erklärung

Anhand des Beispiels oben lässt sich festhalten, dass mit Hilfe der Speicherung des Klicks in data-clicks lässt sich abwechselnd die erste und die zweite Methode ausführen.

Soll mehr als nur eine Methode im Wechsel ausgeführt werden muss in data-clicks ein Zähler gespeichert werden. Dieser wird dann im if-Statements mit modulo n verglichen. Wobei n der Anzahl an durchzuwechselnde Methoden entspricht.

Heißt so viel wie, wenn 5 Methoden nacheinander durchwechseln werden sollen, muss im if-Statements clicks % 5 verwendet werden. Bei mehr als 2 Zuständen empfiehlt sich zur Übersichtlichkeit die Verwendung eines switch-Statements

$('h4').click(function() {
  var clicks = $(this).data('clicks'),
    sibling = $(this).next();
  
  switch (clicks % 5) {
    case 1:
      methode1();
      break;
    case 2:
      methode2();
      break;
    case 3:
      methode3();
      break;
    case 4:
      methode4();
      break;
    default:
      methode0();
      break;
  }  

  $(this).data('clicks', ++clicks);
});
Meine Mission

Ziel meiner Veröffentlichungen ist es, meine Begeisterung für die Programmierung und das über die Jahre gewonnene Wissen mit anderen Entwicklern zu teilen. Dabei ist es mir wichtig, Lösungen zu thematisieren für die ich in Suchmaschinen keine Antworten finden konnte. Außerdem versuche ich die von mir veröffentlichten Extensions an Beispielen zu erläutern.

Entwicklung
Service
Neueste Blogeinträge

evoWeb © 2019