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.