[Snippet/Javascript] jquery.toggleAttr

In jQuery gibt es die Funktionen „toggle“ um Elemente ein/auszublenden und „toggleClass“ um zwischen 2 CSS-Klassen hin und her zu wechseln. Da liegt es doch nahe diese Funktion auch für sämtliche HTML-Attribute umzusetzen. Ich brauchte diese Funktion um komfortabel via Button ein Passwortfeld zu einem normalen Feld zu switchen.

(function ( $ ) {
	$.fn.toggleAttr = function(attr, value) {
		if (!this.data('old-attr')) this.data('old-attr', this.attr(attr));
		if (!this.data('new-attr')) this.data('new-attr', value);
		if (!this.data('toggle-attr')) this.data('toggle-attr', attr);
		if (this.attr(attr) == value) this.attr(attr, this.data('old-attr'));
		else this.attr(attr, value);
		return this;
	};
}( jQuery ));

Anwendungsbeispiel:

<input placeholder="Passwort" type="password" />
<button type="button" onclick="$(this).prev('input').toggleAttr('type','text')">
  show/hide pass
</button>

Den Code findet ihr auch auf GitHub.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.