javascript - 将 "this"与 javascript 和 Jquery 一起使用

Question

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

网格的每个部分都有“tictactoe”类和一个指定其区域的 id，例如“upleft”。我的想法是，html 元素中的 onclick 将调用一个 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中？其次，我该如何解决这个问题？

Answer 1

当您定义函数内联时，您需要将DOM元素作为参数传递给函数

onclick="displayX(this)" 


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

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

最好将事件附加到 javascripe 文件中..

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