如何在ClickjQuery函数中正确传递$（this）

我正试图在jQuery中创建一个TictaToe项目，我遇到了一个大问题

磁贴位于

标记中，我正在尝试使其在用户单击磁贴时调用“标记”功能

如果我们现在查看“marked”函数，

$（this）

将作为调用该函数的

节点

但是，它没有做任何事情，所以我检查了控制台，显然

$（这个）

包含DOM窗口对象

我是否可以将正确类型的

$（this）

发送到“marked”函数

谢谢大家!

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

var TURN_X=错误；
var TURN_O=真；
var turn=false；//这是为了看看轮到谁了。
$（文档）.ready（函数（）{
var listCells=$.makeArray（$（“td”）；
$（“td”）。单击（function（）{marked（listCells）}）；//这就是我遇到问题的地方
返回false；
});
功能标记（arr）
{
console.log（$（this））；//此控制台日志返回“DOM窗口”
$（此）.addClass（“标记”）；
如果（转动==转动X）
{
this.innerHTML=“X”；
转向=假；
}
其他的
this.innerHTML=“O”；
var tileNum=$（this.attr（“id”）；
}

试试这个：

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



function marked(o,arr)
{
...

---

将触发事件的元素发送到函数，如下所示：

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

在函数中：

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

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

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

---

您可以使用

call

方法指定函数的范围：

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

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

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

现在，标记的

函数可以使用
this
关键字访问单击的元素。
您需要将
$（this）
传递给您的函数：

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

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

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

尝试：

然后：

您的代码没有遵循正确的原则

$(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为您管理
这一事实
如果您直接传递回调函数而不是自己调用它们，那么这将始终是您所期望的

更简单地说，使用bind：

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

是要传入整个数组（即
列表单元格
），还是只传入单击的表格单元格？-如果只是您单击的td，您可以使用
$（“td”）。单击（function（）{marked（$（this））}）在你的点击事件中..他在他的函数中混合使用了
$（this）
和
this
）这只是一个次要问题，但我只是好奇为什么将所有内容包装在ready函数中并避免使用全局变量是良好的编码习惯。此外，我正在尝试创建一个“td”标记数组。据我所知，选择器操作$（“td”）返回节点列表，而不是数组。将$（“td”）分配给jquery对象$listCells会将节点列表转换为数组吗？@wayfare a）污染全局名称空间会产生副作用，最显著的是来自项目不同部分的变量会相互覆盖。只要一个项目很小，这种情况就不会发生。当项目增长时，这可能会引入恼人且难以发现的bug。除此之外，通过全局变量传输状态是一种糟糕的方式。b） jQuery对象是一个数组。不需要转换它
$（'td'）
返回一个
节点数组。注意，我使用
$varname
来表示包含jQuery对象的变量——这是一种约定。