web-dev-qa-db-ja.com

クリックjQuery関数で$（this）を適切に渡す方法

私はjQueryでtictactoeプロジェクトを作成しようとしていますが、大きな問題があります...

タイルは_<td>_タグ内にあり、ユーザーがタイルをクリックすると「マークされた」関数が呼び出されるようにしようとしています。

「マークされた」関数を調べると、$(this)は、関数が呼び出された_<td>_ノードになることを意図しています。

しかし、何もしていなかったので、コンソールを確認し、$(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");
    }
_
jqueryclickthis
26
wayfare

あなたのコードは正しい原則に従っていません。

$(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
Tomalak

そのような関数にイベントを発生させる要素を送信します。

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

関数内：

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

もっと簡単に言うと、bindを使用します。

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

試してください：

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

これを試して：

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



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

callメソッドを使用して、関数のスコープを指定できます。

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

これで、marked関数は、thisキーワードを使用して、クリックされた要素にアクセスできます。

0
Guffa

$(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
Sarfraz