Problemi con Javascript per cambiare la classe di appartenenza di un oggetto

**bingel** · 06-04-2010, 22:58

Utilizzo jquery ed il seguente metodo per caricare una pagina html (pagina1.html) all'interno di un box "div" con id "box" nel momento in cui clicco su un determinato link che ha id "link1" e classe "attivato":

codice:

$('.attivato#link1').click(function(){$('#box').load('pagina1.html');document.getElementById(this).className='disattivato';});

Nel momento in cui clicco sul link, gli cambio anche la classe di appartenenza in "disattivato".

Teoricamente, andando a ricliccare successivamente sul link, questo non dovrebbe reagire in quanto la sua classe non è più "attivato" bensì "disattivato".

So con certezza che il cambio di classe ha esito positivo (l'ho verificato mettendo degli alert che mi restituissero il nome della classe, sia prima che dopo l'istruzione che disattiva il link), tuttavia invece di risultare disattivato, il link continua a reagire come se fosse ancora attivo.

Apparentemente è inspiegabile: dov'è l'inghippo?, dove sto sbagliando?

Forse perché la porzione di codice che ho riportato si trova dentro una funzione che viene caricata durante il caricamento della pagina? Eppure non dovrebbe visto che comunque anche l'alert si trova all'interno e al contrario del metodo di jquery reagisce al cambio di classe!

Spero di essere stato sufficientemente comprensibile.

Grazie in anticipo.

**Xinod** · 07-04-2010, 01:04

e' chiaro che una volta valutato il link, quello che succede allo stesso, almeno per come hai scritto tu lo script, non interessa piu' jquery

se funzionasse come supponi basterebbe in qualsiasi momento assegnare una classe ad un elemento qualsiasi per fargli ereditare un comportamento specificato per altri elementi
...vuoi un po' troppo ...si fa' pure, ma non e' cosi' elementare

rivaluta la classe al click, se ha ancora quella classe prosegui al load altrimenti no

jquery ha gia' i suoi metodi per assegnare e rilevare le classi
http://api.jquery.com/category/css/
fare una cosa del genere
document.getElementById(this).className='disattiva to';
non e' proprio il massimo...

ciao

**bingel** · 07-04-2010, 16:37

Credo di aver capito cosa vuoi dire: jquery legge la classe al momento in cui la pagina si carica poi non la legge più pertanto anche se io modifico la classe, jquery si tiene a mente quella che ha letto la prima volta. A grandi linee dico bene?

Cmq come potrei risolvere? Per esempio, come potrei variare il seguente script in modo che jquery reagisca come dico io e cioé dopo il primo click il link risulti disattivato?

Non badare al codice se sia proprio elegante o meno, è solo un esempio, le ottimizzazioni del caso le farò in seguito se riuscirò a farlo funzionare.

codice:

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

</head>
<body>                                                                                                    
                                                                                                  
<p style="cursor:pointer" id="link1" class="attivato">link</p>

<script type="text/javascript" language="javascript">
$('.attivato#link1').click(function(){
alert(this.className);
$(this).removeClass('attivato').addClass('disattivato');
alert(this.className);
});
</script>

</body>
</html>

**Xinod** · 07-04-2010, 17:15

per grandi linee e' come dici

codice:

$('.attivato#link1').click(function(){
  if($(this).hasClass('attivato')){
    // qui quello che deve fare solo al primo click
    $(this).removeClass('attivato').addClass('disattivato');
  }
});

il tutto si potrebbe risolvere anche in altri modi, ma che probabilmente ti risulterebbero meno chiari

ciao

**bingel** · 07-04-2010, 17:16

Mi rispondo da solo:

codice:

<html>
<head>
<script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

</head>

<body>                                                                                                    

                                                                                                   
<p style="cursor:pointer" id="link1" class="attivato">link</p>

<script type="text/javascript" language="javascript">

$('.attivato#link1').live('click', function(){
alert(this.className);
$(this).removeClass('attivato').addClass('disattivato');
alert(this.className);
});

</script>


</body>
</html>

**bingel** · 07-04-2010, 17:19

Non avevo visto la tua risposta.

Grazie lo stesso.

Discussione: Problemi con Javascript per cambiare la classe di appartenenza di un oggetto

Strumenti discussione

Ricerca discussione

Visualizza

Problemi con Javascript per cambiare la classe di appartenenza di un oggetto

Permessi di invio