Question

我正在尝试简化一些tic tac toe游戏的代码。

网格的每个扇区都有“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元素作为argument to the function传递

onclick="displayX(this)" 


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

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

最好在javascripe file..

中附加活动

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

Answer 2

由于您使用的是jQuery，因此可以使用.on绑定处理程序，请参阅下面的

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

这比在html上使用onclick更好。如果您仍想使用onclick，则需要传递this。见下文，

然后在你的js中，

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

Answer 3

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

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

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

Answer 4

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

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

然后将您的功能修改为：

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