Javascript 使用jQuery按类选择子div

我正在尝试使用Javascript/jQuery创建一个内存游戏。基本上，每个游戏开始时都会生成一个随机数组，用户的任务是匹配字母集。我无法从数组中选择单个字母

请参阅JSFIDLE上的工作示例，但相关部分如下所示：

以下是插入数组的html：

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

以下是生成数组的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.row.column

• .column

这些选项都不能只选择一个字母（事实上，当我只使用

#game

之外的任何东西时，根本不会调用hover函数）

这里按类选择子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>

E
D
E
D
B
A.
C
C
A.
B

您可以使用伪类并在ID上选择：

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

---

您可以使用伪类并在ID上选择：

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

---

由于要动态生成字母div，因此需要使用jQuery的.on（）函数将mouseenter和mouseleave事件绑定到div。试试这个：

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

---

由于要动态生成字母div，因此需要使用jQuery的.on（）函数将mouseenter和mouseleave事件绑定到div。试试这个：

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

---

有两种方法可以做到这一点：

（1） 所有CSS

div#游戏div:悬停{
背景色：#A6977B；
}

（2） 使用Jquery

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

---

有两种方法可以做到这一点：

（1） 所有CSS

div#游戏div:悬停{
背景色：#A6977B；
}

（2） 使用Jquery

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

---

您可以通过$（“#game”）选择#game的子项。子项（“.row”）？您可以发布生成的html，也可以在上面创建一个工作示例吗？您尝试过$（“.row”）？您还需要为此使用jquery吗？为什么不使用

：hover

选择器在css中设置一个规则呢

.column:hover{background color:59277b；}

？同上：为什么要使用javascript？另外，您确定生成的html是正确的吗？您正在创建行，但总是附加到#game div。。。您是否应该创建行，并将“column”div附加到行中？您可以按$（“#game”）选择#game的子项。子项（“.row”）？您可以发布生成的html，也可以将其组合成一个工作示例吗？您尝试过$（“.row”）？您还需要为此使用jquery吗？为什么不使用

：hover

选择器在css中设置一个规则呢

.column:hover{background color:59277b；}

？同上：为什么要使用javascript？另外，您确定生成的html是正确的吗？您正在创建行，但总是附加到#game div。。。您不应该创建行，并将“column”div附加到行中吗？这很有效-谢谢！！为什么将.on（）与“mouseenter”和“mouseleave”一起使用会起作用，但简单地说，.hover（）不起作用？因为.hover（）试图绑定到现有的元素，而且由于您是动态创建元素的，所以它们还不存在。通过使用.on（），您可以绑定到现在或将来存在的任何元素（您可以在.on（）中使用.hover（），但我发现单独使用mouseenter和mouseleave事件更容易阅读，.hover（）实际上就是这样做的）。查看有关的文档，特别是“直接和委托事件”部分。这很有效-谢谢！！为什么将.on（）与“mouseenter”和“mouseleave”一起使用会起作用，但简单地说，.hover（）不起作用？因为.hover（）试图绑定到现有的元素，而且由于您是动态创建元素的，所以它们还不存在。通过使用.on（），您可以绑定到现在或将来存在的任何元素（您可以在.on（）中使用.hover（），但我发现单独使用mouseenter和mouseleave事件更容易阅读，.hover（）实际上就是这样做的）。检查有关的文档，特别是“直接和委托事件”部分。