javascript - jQueryを使用してクラスごとに子divを選択する

Question

Javascript/jQueryを使用してメモリのゲームを作成しようとしています。基本的に、各ゲームの開始時にランダムな配列が生成され、ユーザーのタスクは文字のセットを一致させることです。配列から個々の文字を選択するのに問題があります。

これがjsfiddleの実例へのリンクですが、関連する部分は以下のとおりです。

配列が挿入されるhtmlは次のとおりです。

<div id="game"></div>

現在、文字の背景色を変更するホバー関数を実装しようとしています。CSSは次のとおりです。

.hover
{
  background-color: #A6977B;
}

配列を生成するJavascriptは次のとおりです。

function generateBoxes(gameSize, lettersSize) { 
  var currentLetter;
  letters = randomizeArray(lettersSize);
  rows = gameSize/columns; 
  for (var i=0; i<rows; i++) {
    var row = $("<div class='row'></div>");
    $("#game").append(row);
    for (var n=0; n<columns; n++) {
      currentLetter = letters[5*i + n];
      row.append("<div class='column displayNone' id = 'r" + i + "c" + n + "'>" + currentLetter + "</div>");
    }
  }

};

ホバー関数のJavascriptは次のとおりです。

  $("#game").hover(function() {
    $(this).toggleClass("hover");
  }); 

ホバー関数のこのJavascriptコードは、配列内のすべての文字を選択するために機能します。ただし、一度に1つだけ選択したいと思います。私は次のように置き換えてみまし#gameた：

• #game div
• #game .row .column
• .column

これらのオプションはいずれも、1文字だけを選択するためには機能しません（実際、私が単に#game、以外のものを使用する場合、ホバー関数はまったく呼び出されません）。

ここでクラスごとに子divを選択する正しい方法は何ですか？

編集：生成されたhtmlは次のとおりです。

<div id="game"> 
  <div class="row">
    <div class="column displayNone" id="r0c0">E</div>
    <div class="column displayNone" id="r0c1">D</div>
    <div class="column displayNone" id="r0c2">E</div>
    <div class="column displayNone" id="r0c3">D</div>
    <div class="column displayNone" id="r0c4">B</div>
  </div>
  <div class="row">
    <div class="column displayNone" id="r1c0">A</div>
    <div class="column displayNone" id="r1c1">C</div>
    <div class="column displayNone" id="r1c2">C</div>
    <div class="column displayNone" id="r1c3">A</div>
    <div class="column displayNone" id="r1c4">B</div>
  </div>
</div>

Answer 1

これを行うには2つの方法があります。

（1）すべてのCSS

div#game div:hover {
  background-color: #A6977B;
}

（2）Jqueryの使用

$('#game div').hover(function(){
  $('#game div').removeClass('hover');
  $(this).addClass('hover');
  return false;
})

Answer 2

文字のdivを動的に生成しているので、jQueryの.on（）関数を使用して、mouseenterイベントとmouseleaveイベントをdivにバインドする必要があります。これを試して：

$('#game').on('mouseenter', 'div.column', function() {
    $(this).toggleClass("hover")
}).on('mouseleave', 'div.column', function() {
    $(this).toggleClass("hover")
});

Answer 3

疑似クラスを使用して、IDを選択できます。

$("#game").find("div[id=r0c0]")