使用"this"与javascript和Jquery

Question

我试图简化一些tic tac toe游戏的代码.

网格的每个扇区都有"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");
                }

没有显示文本是指定为upleft的网格.首先,"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");
});