web-dev-qa-db-fra.com

Comment passer correctement $ (this) dans la fonction click jQuery

J'essaie de faire un projet tictactoe dans jQuery et j'ai un problème majeur ...

Les tuiles sont dans les balises <td> Et j'essaie de faire en sorte que lorsque l'utilisateur clique sur la tuile, il appelle la fonction "marqué".

Si nous examinons maintenant la fonction "marquée", $(this) est destiné à être le nœud <td> À partir duquel la fonction a été appelée.

Cependant, il ne faisait rien alors j'ai vérifié la console et apparemment $(this) contenait l'objet DOM Window.

Existe-t-il de toute façon que je peux envoyer le bon type de $(this) à la fonction "marquée"?

Merci!

<script type="text/javascript">

    var TURN_X = false;
    var TURN_O = true;

    var turn = false;  // this is to see whos turn it is.

    $(document).ready(function(){

        var listCells = $.makeArray($("td"));
        $("td").click(function(){marked(listCells)});   //THIS IS WHERE I HAVE PROBLEMS
        return false;
    });

    function marked(arr)
    {
        console.log($(this));  // THIS CONSOLE LOG RETURNS "DOM Window"
        $(this).addClass("marked");

        if(turn == TURN_X)
        {
        this.innerHTML = "X";
        turn = false;
        }
        else
        this.innerHTML = "O";

        var tileNum = $(this).attr("id");
    }
jqueryclickthis
26
wayfare

Votre code ne suit pas les bons principes.

$(function(){
    var TURN_X = "X",
        TURN_O = "O", 
        turn   = TURN_O,
        $listCells = $("td");

    function marked() {        // define event handler
        var $this   = $(this),
            tileNum = $this.attr("id");

        if ( !($this.hasClass("marked") ) {
            $this.addClass("marked").text(turn);
            turn = (turn == TURN_X) ? TURN_O : TURN_X;
        }
    }

    $listCells.click(marked);  // attach event handler
});
  1. Enveloppez tout dans la fonction document.ready. Évitez autant que possible les variables globales.
  2. Profitez du fait que jQuery gère this pour vous. this sera toujours ce que vous attendez si vous passez directement des fonctions de rappel au lieu de les appeler vous-même.
26
Tomalak

Envoyez l'élément qui déclenche l'événement à la fonction comme ça:

$("td").click(function(){
        marked($(this));
        return false;
    });

et dans la fonction:

function marked(td)
{
     console.log($(td));  
     $(td).addClass("marked");
     //....
}
11
Hadas

Plus simplement, utilisez bind:

$(".detailsbox").click(function(evt){
   test.bind($(this))();
});
function test()
{
   var $this = $(this);
}
4
Daphoque

Essayer:

$("td").click(function(event){
    marked(listCells, $(this));
});

Ensuite:

function marked(arr, sel) {
    console.log($(this));
    sel.addClass("marked");

    if(turn == TURN_X) {
        this.innerHTML = "X";
        turn = false;
    } else {
        this.innerHTML = "O";
    }
    var tileNum = $(this).attr("id");
}
1
francisco.preller
$(document).ready(function(){
    var TURN_X = false,
        TURN_O = true,
        turn = false,
        listCells = $.makeArray($("td"));

    $("td").click(function() {
        marked(listCells, this)
    });

    function marked(arr, self) {
        $(self).addClass("marked");

        if(turn == TURN_X) {
            self.innerHTML = "X";
            turn = false;
        }else{
            self.innerHTML = "O";
            var tileNum = self.id;
        }
    }
});
0
adeneo

essaye ça:

$(function(){
    var listCells = $.makeArray($("td"));
    $("td").click(function(){marked($(this),listCells)});  
});



function marked(o,arr)
{
...
0
quzary

Vous pouvez utiliser la méthode call pour spécifier la portée de la fonction:

$("td").click(function(){ marked.call(this, listCells); });

La fonction marked peut désormais accéder à l'élément cliqué à l'aide du mot clé this.

0
Guffa

Vous devez passer $(this) à votre fonction:

$("td").click(function(){ marked(listCells, $(this))} );

Et modifiez votre fonction comme ceci:

function marked(arr, that)
{
  that.addClass("marked");

  if(turn == TURN_X)
  {
    that.innerHTML = "X";
    turn = false;
  }
  else
    that.innerHTML = "O";

  var tileNum = that.attr("id");
}
0
Sarfraz