wake-up-neo.com

So übergeben Sie $ (this) ordnungsgemäß in der click jQuery-Funktion

Ich versuche, ein Tictactoe-Projekt in jQuery zu erstellen, und ich habe ein großes Problem ...

Die Kacheln befinden sich in <td> - Tags und ich versuche, dies so zu gestalten, dass der Benutzer beim Klicken auf die Kachel die Funktion "markiert" aufruft.

Wenn wir uns nun die "markierte" Funktion ansehen, soll $(this) der Knoten <td> Sein, von dem aus die Funktion aufgerufen wurde.

Da es jedoch nichts tat, überprüfte ich die Konsole und anscheinend enthielt $(this) das DOM Window-Objekt.

Kann ich trotzdem die richtige Art von $(this) an die "markierte" Funktion senden?

Vielen Dank!

<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

Ihr Code folgt nicht den richtigen Grundsätzen.

$(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. Wickeln Sie alles in die Funktion document.ready ein. Vermeiden Sie globale Variablen, wo immer dies möglich ist.
  2. Nutzen Sie die Tatsache, dass jQuery this für Sie verwaltet. this ist immer das, was Sie erwarten, wenn Sie Rückruffunktionen direkt übergeben, anstatt sie selbst aufzurufen.
26
Tomalak

Senden Sie das Element, das das Ereignis auslöst, an die folgende Funktion:

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

und in der Funktion:

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

Einfacher gesagt, benutze bind:

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

Versuchen:

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

Dann:

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

versuche dies:

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



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

Sie können die call -Methode verwenden, um den Bereich für die Funktion anzugeben:

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

Jetzt kann die Funktion marked mit dem Schlüsselwort this auf das angeklickte Element zugreifen.

0
Guffa

Sie müssen $(this) an Ihre Funktion übergeben:

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

Und ändern Sie Ihre Funktion wie folgt:

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