Cómo pasar $ (this) adecuadamente en función de jQuery clic

Question

que estoy tratando de hacer un proyecto tictactoe en jQuery y estoy teniendo un problema importante ...

Las baldosas están en <td> etiquetas y estoy tratando de haga que cuando el usuario haga clic en el mosaico, invoque la función "marcada".

Si ahora nos fijamos en la función "marcada", $(this) es el nodo <td> desde el que se llamó a la función.

Sin embargo, no estaba haciendo nada, así que revisé la consola y aparentemente $(this) contenía el objeto Ventana DOM.

¿De todos modos puedo enviar el tipo correcto de $(this) a la función "marcada"?

¡Gracias!

<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"); 
    } 

Answer 1

Su código no sigue los principios correctos.

$(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. envolver todo en la función document.ready. Evite las variables globales siempre que sea posible.
2. Aproveche el hecho de que jQuery maneja this para usted. this siempre será lo que esperas si pasas las funciones de devolución de llamada directamente en lugar de llamarlas tú mismo.

Answer 2

probar esto:

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



function marked(o,arr) 
{ 
... 

Answer 3

Enviar el elemento que desencadena el evento a la función de esa manera:

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

y en la función:

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

Answer 4

Usted puede usar el método call para especificar el alcance de la función:

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

Ahora la función marked puede acceder al elemento hecho clic usando la palabra clave this.

Answer 5

lo necesario para pasar $(this) a su función:

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

y modificar su función como esta:

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"); 
} 

Answer 6

Probar:

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

continuación:

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"); 
} 

Answer 7

$(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; 
     } 
    } 
}); 

Answer 8

Más simplemente, el uso aprieto:

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