javascript - 在 javascript 和 Jquery 中使用“this”

Question

我正在尝试简化井字游戏的一些代码。

网格的每个扇区都有“tictactoe”类和指定其区域的 id，例如“upleft”。我的想法是，onclick在 html 元素中，将调用一个 JavaScript 函数，该函数将在该空间中显示一个 X。

所以这就是我所拥有的：

HTML 元素：

<td id="upleft" onclick="displayX()" class="tictactoe"></td>

JavaScript/JQuery 函数：

                 function displayX()
                {
                        $('#upleft').text("x");
                }

基本上我想将函数更改为使用“this”而不是“#upleft”

但是，当我这样做时：

                function displayX()
                {
                        $(this).text("x");
                }

不显示任何文本是指定的网格向上。首先，“this”函数是否将代码放入指定的id中？其次，我该如何解决这个问题？

score 5 · Accepted Answer

定义函数 Inline时需要将DOM 元素作为 a传递argument to the function

onclick="displayX(this)" 


function displayX(elem)
{
    $(elem).text("x");
}

编写内联 javascript 是个坏主意.. ..避免它..

最好将事件附加在javascripe file..

$("td").on('click', function () {
   $(this).text("x");
});

score 1 · Accepted Answer

由于您使用的是 jQuery，您可以使用.on如下所示绑定处理程序，

$("#upleft").on('click', function () {
   $(this).text("x");
});

这比onclick在 html 上使用要好。如果您仍想使用，onclick则需要通过this. 见下文，

然后在你的js中，

 function displayX(obj) {
    $(obj).text("x");
 }

score 1 · Accepted Answer

您可以使用 jquery 绑定事件。做

$("#upleft").click(function(event){displayX(event)});

function displayX(event)
{
    $(event.target).html("X");
}

score 0 · Accepted Answer

更改您的 HTML 元素以传递this：

<td id="upleft" onclick="displayX(this)" class="tictactoe"></td>

然后将您的功能修改为：

function displayX(el)
{
    $(el).text("x");
}

4 回答 4