javascript - javascript と Jquery で「this」を使用する

Question

三目並べゲームのコードを単純化しようとしています。

グリッドのすべてのセクターには、「tictactoe」というクラスと、「upleft」などの領域を指定する ID があります。私の考えではonclick、html 要素内で、そのスペースに X を表示する JavaScript 関数を呼び出します。

だからここに私が持っているものがあります:

HTML 要素:

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

JavaScript/JQuery 関数:

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

基本的に「#upleft」の代わりに「this」を使用するように機能を変更したい

ただし、これを行うと：

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

左上に指定されたグリッドは、テキストが表示されません。まず、「this」関数はコードを指定された ID に配置しますか? 第二に、どうすればこの問題を解決できますか?

score 5 · Accepted Answer

関数 Inlineを定義するときは、 DOM 要素をとして渡す必要があります。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