Visualizzazione dei risultati da 1 a 10 su 10

Discussione: [jquery] selettore di classe ignorato

  1. #1
    Utente di HTML.it
    Registrato dal
    Feb 2016
    Messaggi
    7

    [jquery] selettore di classe ignorato

    Ciao amici,
    sto avendo un problema nell'utilizzo di un selettore di classe, mi spiego:

    ho un menu composto da tag UL e LI e voglio gestire i click agli LI che posseggano una certa classe "klass".

    Il meccanismo è il seguente:
    prima associo ad ogni LI la classe "klass", poi al click su un LI con "klass" associata gli rimuovo la classe, in modo che al successivo click sullo stesso LI il comportamento sia differente da prima, a causa della rimozione della "klass".

    codice:
    jQuery(document).ready(function () {
        jQuery('li').addClass('klass');
    
    
        jQuery('li.klass').click(function() {
            //...
            
            jQuery(this).removeClass('klass');
            
            //...
        });    
    });
    Solo che non funziona, nel senso che pur non avendo il LI più la "klass" (ho verificato da debugger di chrome che effettivamente la classe non ci sia più), al click il selettore jQuery lo seleziona lo stesso.
    Funziona solamente se evito di associare la "klass" ai tag LI fin dall'inizio,

    Ho trovato questo workaround, ma non mi soddisfa, vorrei capire perché il metodo sopra non funziona:

    codice:
    jQuery(document).ready(function () {
        jQuery('li').addClass('klass');
    
    
        jQuery('li').click(function() {
            
        if (jQuery(this).hasClass('klass')) {
            jQuery(this).removeClass('klass');
                    
            // ...
        }
    });
    Ho provato sia con jQuery jquery-3.2.1 che la 1.11.0.
    Sia Chrome che Firefox.


    Vi ringrazio


  2. #2
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,534
    Ciao, spiega per favore esattamente cosa vorresti ottenere. La funzione click() che hai usato non è la stessa cosa di on('click') (se questo intendevi fare).
    Click() esegue il click (in questo caso non manuale ma via javascript). jQuery('.myClass').on('click', function(){.....}); fa qualcosa nel momento in cui andrai a cliccare sul selettore indicato.

  3. #3
    Utente di HTML.it
    Registrato dal
    Feb 2016
    Messaggi
    7
    Ciao,

    dunque, io voglio ottenere un comportamento al primo click su un LI e, da quel momento in poi, un comportamento diverso ai successivi click sullo stesso LI.

    Quindi
    1. assegno "klass" ai LI
    2. al click su un LI eseguo la mia logica e rimuovo "klass"
    3. al successivo click sul LI la logica non dovrebbe essere più eseguita, in quanto il tag non ha più la "klass" ed il selettore jQuery('li.klass') non dovrebbe più selezionare il LI.

    Ma non mi funziona, il LI viene selezionato lo stesso.



  4. #4
    Devi delegare l’evento con il metodo on()

  5. #5
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,534
    Se ho capito quel che vuoi fare questo dovrebbe funzionare
    codice:
    jQuery('li').addClass('klass'); //assegnazione classe
    
    jQuery('li.klass').one('click',function(){
     		
     		//....faccio qualcosa la prima volta
    
    
     		var LI = jQuery(this);
     		LI.removeClass('klass'); //Rimuovo la classe
    
    
     		LI.on('click',function(){
     			//Farò questo per i successivi click
     		});
    
    
    });
    Ovviamente se devi aggiungere diverse classi o meno lo saprai tu.

  6. #6
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,095
    Quote Originariamente inviata da m4rko80 Visualizza il messaggio
    Se ho capito quel che vuoi fare questo dovrebbe funzionare
    codice:
    jQuery('li').addClass('klass'); //assegnazione classe
    
    jQuery('li.klass').one('click',function(){
             
             //....faccio qualcosa la prima volta
    
    
             var LI = jQuery(this);
             LI.removeClass('klass'); //Rimuovo la classe
    
    
             LI.on('click',function(){
                 //Farò questo per i successivi click
             });
    
    
    });
    Ovviamente se devi aggiungere diverse classi o meno lo saprai tu.
    a parte che la funzione è ON non ONE...

    ma invece di ri bindare gli eventi è sufficiente l'utilizzo di una variabile globale settata a false...e poi a true dopo il primo click
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


  7. #7
    Utente di HTML.it L'avatar di m4rko80
    Registrato dal
    Aug 2008
    residenza
    Milano
    Messaggi
    2,534
    Quote Originariamente inviata da ciro78 Visualizza il messaggio
    a parte che la funzione è ON non ONE...
    La funzione ONE esiste http://api.jquery.com/one/ e binda un'azione una volta sola. Dato che vuole eseguire un'azione una sola volta, per evitare di bindare piu' volte lo stesso LI (non so che altro ci sia dietro al codice) , ho proposto la soluzione.
    Di fatto all'interno del ONE() solo al primo click elimina la classe e binda 1 volta sola lo stesso LI per tutti i successivi CLICK.
    ON() l'ho messa appunto all'interno per lasciare bindati i LI in seguito.

  8. #8
    Utente di HTML.it
    Registrato dal
    Feb 2016
    Messaggi
    7
    Ciao a tutti,

    ho provato con il metodo .on('click', function() {... ma il comportamento è identico a quello che avevo già riscontrato. Oltretutto leggo nella guida di jQuery che .on('click', function() ..) è uno shortcut di .click(function() {.. )

    Poi non penso che le soluzioni che utilizzano ONE e la variabile globale facciano al caso mio: io devo implementare il comportamento per ogni LI di UL, quindi se un LI viene cliccato deve cambiare comportamento ai click successivi, ma gli altri LI sono indipendenti da questo e devono avere i loro stati primo click/click successivi in autonomia.

  9. #9
    Quote Originariamente inviata da piz82 Visualizza il messaggio
    Ciao a tutti,

    ho provato con il metodo .on('click', function() {... ma il comportamento è identico a quello che avevo già riscontrato. Oltretutto leggo nella guida di jQuery che .on('click', function() ..) è uno shortcut di .click(function() {.. )

    Poi non penso che le soluzioni che utilizzano ONE e la variabile globale facciano al caso mio: io devo implementare il comportamento per ogni LI di UL, quindi se un LI viene cliccato deve cambiare comportamento ai click successivi, ma gli altri LI sono indipendenti da questo e devono avere i loro stati primo click/click successivi in autonomia.
    Hai usato il metodo on() ma non hai delegato l’evento.

    La soluzione proposta da m4rko80 fa quello che ti serve, l’unico neo è che continua ad usare, inutilmente, la classe klass.
    Il metodo one() lo si può applicare direttamente ai li, non è necessario aggiungervi prima una classe.

  10. #10
    Moderatore di Javascript L'avatar di ciro78
    Registrato dal
    Sep 2000
    residenza
    Napoli
    Messaggi
    8,095
    Quote Originariamente inviata da m4rko80 Visualizza il messaggio
    La funzione ONE esiste http://api.jquery.com/one/ e binda un'azione una volta sola. Dato che vuole eseguire un'azione una sola volta, per evitare di bindare piu' volte lo stesso LI (non so che altro ci sia dietro al codice) , ho proposto la soluzione.
    Di fatto all'interno del ONE() solo al primo click elimina la classe e binda 1 volta sola lo stesso LI per tutti i successivi CLICK.
    ON() l'ho messa appunto all'interno per lasciare bindati i LI in seguito.
    ops non la conoscevo. ad ogni modo trovo la logica sbagliata come accennato prima
    Ciro Marotta - Programmatore JAVA - PHP
    Preferisco un fallimento alle mie condizioni che un successo alle condizioni altrui.


Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2018 vBulletin Solutions, Inc. All rights reserved.