change - addClass y removeClass en jQuery-no eliminar clase

jquery remove all class

Question

Estoy tratando de hacer algo muy simple. Básicamente, tengo un div ''hot spot'' divisible, cuando haces clic en él, llena la pantalla y muestra algo de contenido. Logré esto simplemente cambiando la clase de div, eliminando ''spot'' y agregando ''grow'' y hay una pequeña animación CSS para hacerla crecer. Esto funciona bien.

El problema es que dentro de esta div hay un botón de cierre, que en este momento es solo texto. Quiero que esto cambie las clases de nuevo, es decir, que elimine el lugar adulto y leído. No hace esto cuando se hace clic. Creo que tiene que ver con el elemento que no tiene esas clases cuando se carga el DOM, pero soy nuevo en jQuery y no sé cómo solucionarlo.

Creo que probablemente hay una manera mucho más sensata de hacerlo, ¿podría alguien dirigirme en la dirección correcta? Estaría muy agradecido. He intentado usar toggleClass en su lugar sin éxito.

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

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

ACTUALIZAR:

Estoy usando este código ahora,

$( 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");
        }
    });
});

extrañamente, la función close_button aún no agregará ''spot'' o eliminará ''grown'' aunque agregará otras clases y eliminará otras clases ... Agregué la cláusula if porque pensé que tal vez ambas funciones se activaban al mismo tiempo tiempo, deshaciéndose el uno al otro, pero parece no hacer ninguna diferencia

Answer 1

Cada vez que veo addClass y removeClass , creo que ¿por qué no usar toggleClass ? En este caso, podemos eliminar la clase .clickable para evitar el burbujeo del evento, y para evitar que el evento se dispare en todo lo que hacemos clic dentro de la div .clickable .

$(document).on("click", ".close_button", function () { 
    $(this).closest(".grown").toggleClass("spot grown clickable");
});  

$(document).on("click", ".clickable", function () {
    $(this).toggleClass("spot grown clickable");
}); 

También recomiendo un envoltorio principal para tus .clickable lugar de usar el document . No estoy seguro de cómo los está agregando dinámicamente, así que no quise asumir su diseño por usted.

http://jsfiddle.net/bplumb/ECQg5/2/

Feliz codificación :)

Answer 2

Creo que el problema está en la anidación de los elementos. Una vez que adjunta un evento al elemento externo, los clics en los elementos internos en realidad están disparando el mismo evento de clic para el elemento externo. Entonces, en realidad nunca vas al segundo estado. Lo que puedes hacer es comprobar el elemento pulsado. Y si es el botón de cerrar para evitar que la clase cambie. Aquí está mi solución:

var element = $(".clickable");
var closeButton = element.find(".close_button");
var onElementClick = function(e) {
    if(e.target !== closeButton[0]) {
        element.removeClass("spot").addClass("grown");
        element.off("click");
        closeButton.on("click", onCloseClick);
    }
}
var onCloseClick = function() {
    element.removeClass("grown").addClass("spot");
    closeButton.off("click");
    element.on("click", onElementClick);
}
element.on("click", onElementClick);

Además estoy agregando y eliminando controladores de eventos.

JSFiddle -> http://jsfiddle.net/zmw9E/1/

Answer 3

Creo que ya casi estás allí. La cosa es que su $(this) en el oyente del "botón de cierre" no es el div pulsable. Así que quieres buscarlo primero. intente reemplazar $(this) con $(this).closest(".clickable") . Y no olvide la e.stopPropagation() como sugiere Guilherme. Eso debería ser algo como:

$( document ).ready(function() {   
    $(document).on("click", ".close_button", function () { 
        alert ("oi");
        e.stopPropagation()
        $(this).closest(".clickable").addClass("spot");
        $(this).closest(".clickable").removeClass("grown");
    });  


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

Answer 4

El problema se debe a la aparición de eventos . La primera parte de su código para agregar .grown funciona bien.

La segunda parte "eliminar la clase adulta" al hacer clic en el enlace no funciona como se espera, ya que se ejecutan tanto el controlador para .close_button como .clickable . Así que se quita y se lee la clase mayor a la div .

Puede evitar esto utilizando e.stopPropagation() dentro de .close_button haga clic en el controlador para evitar que el evento se forme burbujas.

DEMO: http://jsfiddle.net/vL8DP/

Código Completo

$(document).on(''click'', ''.clickable'', function () {
   $(this).addClass(''grown'').removeClass(''spot'');
}).on(''click'', ''.close_button'', function (e) {
   e.stopPropagation();
   $(this).closest(''.clickable'').removeClass(''grown'').addClass(''spot'');
});

Answer 5

Lo que sucede es que su botón de cierre se coloca dentro de su div .clickable , por lo que el evento de clic se activará en ambos elementos.

El evento burbujeante hará que el evento de clic se propague de los nodos secundarios a sus padres. Por lo tanto, su .close_button llamada .close_button se ejecutará primero, y cuando se alcance .clickable , cambiará las clases nuevamente. Como esto corre muy rápido, no puedes notar los dos eventos que sucedieron.

                    / /
--------------------| |-----------------
| .clickable        | |                |
|   ----------------| |-----------     |
|   | .close_button | |          |     |
|   ------------------------------     |
|             event bubbling           |
----------------------------------------

Para evitar que su evento llegue a .clickable , debe agregar el parámetro del evento a su función de devolución de llamada y luego llamar al método stopPropagation .

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

Fiddle: http://jsfiddle.net/u4GCk/1/

Más información sobre el orden de los eventos en general: http://www.quirksmode.org/js/events_order.html (ahí es donde elegí ese bonito arte ASCII =])

Answer 6

Prueba esto :

$(''.close-button'').on(''click'', function(){
  $(''.element'').removeClass(''grown'');
  $(''.element'').addClass(''spot'');
});

$(''.element'').on(''click'', function(){
  $(this).removeClass(''spot'');
  $(this).addClass(''grown'');
});

Espero haber entendido tu pregunta.

Answer 7

Recomendaría almacenar en caché los objetos jQuery que usa más de una vez. Por ejemplo:

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

sería:

    var doc = $(document);
    doc.on(''click'', ''.clickable'', function(){
       var currentClickedObject = $(this);
       currentClickedObject.addClass(''grown'');
       currentClickedObject.removeClass(''spot'');
    });

en realidad es más código, PERO es muuuuuuch más rápido porque no tiene que "recorrer" toda la biblioteca jQuery para obtener el objeto $ (this).

Answer 8

Utilice .on()

necesita delegación de eventos ya que estas clases no están presentes en DOM cuando DOM está listo.

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

Answer 9

¿Por qué no simplificarlo?

jquery

$(''.clickable'').on(''click'', function() {//on parent click
    $(this).removeClass(''spot'').addClass(''grown'');//use remove/add Class here because it needs to perform the same action every time, you don''t want a toggle
}).children(''.close_button'').on(''click'', function(e) {//on close click
    e.stopPropagation();//stops click from triggering on parent
    $(this).parent().toggleClass(''spot grown'');//since this only appears when .grown is present, toggling will work great instead of add/remove Class and save some space
});

De esta manera es mucho más fácil de mantener.

hizo un violín: http://jsfiddle.net/filever10/3SmaV/