Вопросы Теги

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

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

Плитки находятся в теги, и я пытаюсь сделать так, чтобы когда пользователь щелкает плитку, он вызывал «отмеченную» функцию.

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

Однако он ничего не делал, поэтому я проверил консоль и, по-видимому, $(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");
    }
26
задан James Wiseman 5 March 2012 в 08:20
поделиться

3 ответа

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

$(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. Обернуть все в функции document.ready. По возможности избегайте глобальных переменных.
  2. Воспользуйтесь тем, что jQuery управляет this за вас. this всегда будет тем, что вы ожидаете, если будете передавать функции обратного вызова напрямую, а не вызывать их самостоятельно.
26
ответ дан 28 November 2019 в 07:22
поделиться

Вам нужно передать $(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");
}
0
ответ дан 28 November 2019 в 07:22
поделиться 
$(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
ответ дан 28 November 2019 в 07:22
поделиться
Другие вопросы по тегам:

Похожие вопросы: