Ich versuche etwas sehr Einfaches zu tun. Grundsätzlich habe ich einen anklickbaren div 'Hot Spot', bei dem man darauf klickt, dass er den Bildschirm ausfüllt und einige Inhalte anzeigt. Ich habe dies erreicht, indem ich einfach die Klasse von div geändert, 'spot' entfernt und 'grown' hinzugefügt habe, und es gibt eine kleine CSS-Animation, um es wachsen zu lassen. Das funktioniert gut.

Das Problem ist, dass es innerhalb dieses Bereichs einen Close_button gibt, der im Moment nur aus Text besteht. Ich möchte, dass dies die Klassen zurückschaltet - d. H. Gewachsene und gelesene Stellen entfernt. Dies geschieht nicht, wenn Sie darauf klicken. Ich glaube, das liegt daran, dass das Element diese Klassen nicht hat, wenn das DOM geladen wird, aber ich bin neu in jQuery und weiß nicht, wie ich das umgehen soll.

Ich denke, es gibt wahrscheinlich eine viel vernünftigere Methode, könnte mich jemand in die richtige Richtung weisen? Ich wäre sehr dankbar. Ich habe versucht, ToggleClass stattdessen ohne Erfolg zu verwenden.

$( document ).ready(function() {      
    $(".clickable").click(function() {  
        $(this).addClass("grown");  
        $(this).removeClass("spot");
    });   

    $(".close_button").click(function() {  
        alert (this);
        $("#spot1").removeClass("grown");  
        $("#spot1").addClass("spot");
    });   
});

AKTUALISIEREN:

Ich benutze diesen Code jetzt,

$( document ).ready(function() {   
    $(document).on("click", ".close_button", function () { 
        alert ("oi");
        $("#spot1").addClass("spot");
        $("#spot1").removeClass("grown");
    });  


    $(document).on("click", ".clickable", function () {
        if ($(this).hasClass("spot")){
            $(this).addClass("grown");
            $(this).removeClass("spot");
        }
    });
});

Seltsamerweise fügt die close_button-Funktion immer noch nicht "spot" oder "grown" hinzu, obwohl sie andere Klassen hinzufügt und andere Klassen entfernt ... Ich habe die if-Klausel hinzugefügt, weil ich dachte, dass möglicherweise beide Funktionen gleichzeitig ausgelöst werden Zeit, sich gegenseitig rückgängig zu machen, aber es scheint keinen Unterschied zu machen