Als Full-Stack-Entwickler hat mich mal wieder ins Frontend verschlagen. Was soll ich sagen – um jQuery kommt man einfach nicht rum.
Meine neue Lieblingsmethoden in jQuery: .hasClass, .removeClass, addClass
$(document).off('click', '.js_checkboxchange').on('click', '.js_checkboxchange', function (e) { if ($(this).hasClass("ls-icon-checked")) { $(this).removeClass("ls-icon-checked") $(this).addClass("ls-icon-unchecked") }else if ($(this).hasClass("ls-icon-unchecked")) { $(this).removeClass("ls-icon-unchecked") $(this).addClass("ls-icon-checked") } if ($(this).hasClass("js_callpost")) { $(this).removeClass("js_callpost") $(this).addClass("js_calldelete") } else if ($(this).hasClass("js_calldelete")) { $(this).removeClass("js_calldelete") $(this).addClass("js_callpost") } });
Was macht das Code-Fragment? Nun, manchmal will man einfach einen Button wie eine Checkbox aussehen lassen. Mit einer entsprechenden Style-Klasse (ls_) kann man das machen. Man muss nur beim Click die Style-Klasse austauschen.
Jetzt soll der Button auch was tun. In diesem Falle soll er beim „CHECKEN“ einen API-Call mit httpPost absetzen, dagegen beim „UNCHECK“ einen httpDelete schicken. Nun auch das kann man über entsprechende JavaScript-Klassen (js_) machen.
Läuft übrigens super gut, man erkennt kaum den Unterschied.
Veröffentlicht in: Software Entwicklung & Programmierung