onmouseover et fonction inline utilisant l'objet "this".

Question

J'ai le code suivant :

<div id="some_div" style="border: solid 1px red; width:50px; height: 50px;" 
onmouseover="(function(){$(this).css('background','green');})();"></div>

La fonction s'exécute correctement, mais elle ne semble pas pouvoir trouver le "this". Comment puis-je faire en sorte qu'elle sache qu'il s'agit d'une autoréférence ?

(Oui, jquery est référencé dans mon code)

Answer 1

Je ne sais pas si vous voulez utiliser une fonction anonyme ici. Je pense que

<div id="some_div" style="border: solid 1px red; width:50px; height: 50px;" 
onmouseover="$(this).css('background','green');"></div>

fonctionnera.

Answer 2

Si vous avez vraiment besoin de l'intégrer dans une fonction anonyme, vous pouvez le faire.

onmouseover="(function(that){$(that).css('background','green');})(this);"

Answer 3

Cela va être perturbé parce que vous exécutez la fonction. Décomposons-le un peu.

Si ce n'était pas en ligne, cela ressemblerait à ceci :

onmouseover = (function(){
    $(this).css('background','green');
})();

Vous avez remarqué le () à la fin ? Cela signifie que vous exécutez le code avant que la fonction ne soit affectée à onmouseover.

Essayez plutôt ceci :

<div id="some_div" style="border: solid 1px red; width:50px; height: 50px;" onmouseover="$(this).css('background','green');"></div>

Answer 4

@matt vous pouvez faire la même chose avec css, en utilisant simplement la fonction :hover sur la classe.

.SomeDiv
{
    border: solid 1px red; 
    width:50px; 
    height: 50px;
    /*remove the below line if you like to keep the hover color*/
    background-color:white;
}

.SomeDiv:hover
{
    background-color:green;
}

y

<div id="some_div" class="SomeDiv"></div>

Answer 5

Si vous utilisez jQuery, pourquoi ne pas le faire jusqu'au bout ?

$('#tag').hover(function() { $(this).css('background', 'green'); });

<div id="tag"> ... </div>