2014-04-22 15 views
13

Please help.jquery addClass() che non funziona con event.target

Perché jquery addClass() non funziona con event.target? Ho creato un codice e si suppone che aggiunga classe alla destinazione quando si fa clic, ma non funziona, e dice, e.target.addClass non è una funzione.

http://jsfiddle.net/Lq9G4/

CODICE:

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Class Test</title> 
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
    <style> 
     .big { 
      font-size: 5em; 
     } 
     .small { 
      font-size: 1em; 
     } 
    </style> 

</head> 
<body> 
    <p>This is the text</p> 
    <script> 
     $(function() { 
      $("p").click(function(e) { 
         $("a").removeClass("big").addClass("small"); 
         $("this").addClass("big"); //This doesn't work 
         e.target.addClass("big"); //nor this one     
        }); 
     }); 

    </script> 
</body> 
</html> 

risposta

24

Fondamentalmente e.target sarà un oggetto javascript, è necessario convertirlo in un oggetto Jquery prima di utilizzare le sue funzioni come .addClass()

prova,

$(e.target).addClass("big"); 

e allo stesso tempo, $("this").addClass("big"); questo codice non funzionerà poiché si passa this come una stringa. this anche un oggetto JavaScript, è necessario convertire anche questo come un oggetto jQuery come $(this)

+0

Wow. Funziona! Perché? – qtgye

+1

@ user3540736 avevo dato alcune spiegazioni riguardo a ciò nella mia risposta .. :) –

+0

Ora è così chiaro per me. Molte grazie! :) – qtgye

1

Modificare questa linea

$("this").addClass("big"); //This doesn't work 

a

$(this).addClass("big"); //This will work work 

E inoltre in caso di necessità con la event sé quindi è possibile utilizzare

$(e.target).addClass('big'); 
2

Dato .addClass() è un metodo di jQuery, è necessario un oggetto jQuery, in modo da convertire e.target per oggetto jQuery avvolgendolo all'interno $:

$(e.target).addClass("big"); 

Accanto a questo, l'altra soluzione è quella di utilizzare $(this). non c'è bisogno di avvolgere this all'interno " ":

$(this).addClass("big"); 

Updated Fiddle

0

Prova questa:

$(e.target).addClass('big'); 

Demo

2

Hai t wo problema:

$(this).addClass("big"); //Unquote to "this" 
$(e.target).addClass("big"); // select e.target with $() wrapper. 
0
<script> 
    $(function() { 
     $("p").click(function(e) { 
        $("a").removeClass("big").addClass("small"); 
        $(this).addClass("big"); //This doesn't work    
       }); 
    }); 

</script> 

"questo" => questo