Как правильно передать $(this) в функции jQuery

Я пытаюсь создать проект tictactoe в jQuery, и у меня есть большая проблема...

Плитки находятся в тегах <td>, и я пытаюсь сделать так, чтобы, когда пользователь нажимает на плитку, он вызывает "отмеченную" функцию.

Если мы теперь посмотрим на "отмеченную" функцию, $(this) должен быть <td> node, из которого была вызвана функция.

Однако он ничего не делал, поэтому я проверил консоль и, видимо, $(this) содержал объект DOM Window.

В любом случае я могу отправить правильный тип $(this) на "отмеченную" функцию?

Спасибо!

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

Ответы

Ответ 1

Код не соответствует правильным принципам.

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

Оберните все в функции document.ready. Избегайте глобальных переменных там, где это возможно.
Используйте тот факт, что jQuery управляет this для вас. this всегда будет тем, что вы ожидаете, если вы передаете функции обратного вызова напрямую, а не вызываете их самостоятельно.

Ответ 2

Отправьте элемент, который запускает событие, следующим образом:

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

и в функции:

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

Ответ 3

Проще говоря, используйте bind:

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

Ответ 4

попробуйте следующее:

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



function marked(o,arr)
{
...

Ответ 5

Вы можете использовать метод call, чтобы указать область действия для функции:

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

Теперь функция marked может получить доступ к элементу с щелчком, используя ключевое слово this.

Ответ 6

Вам нужно передать $(this) в вашу функцию:

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

И измените свою функцию следующим образом:

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

Ответ 7

Try:

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

Тогда:

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

Ответ 8

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