0

我正在尝试使用 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 代码用于选择数组中的所有字母。但是，我只想一次选择一个。我尝试替换#game为：

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

这些选项都不能只选择一个字母（事实上，当我使用除了 just 之外#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>
4

3 回答 3

3

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

(1) 所有 CSS

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

(2) 使用jQuery

$('#game div').hover(function(){
  $('#game div').removeClass('hover');
  $(this).addClass('hover');
  return false;
})
于 2012-05-07T01:55:16.137 回答
2

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

$('#game').on('mouseenter', 'div.column', function() {
    $(this).toggleClass("hover")
}).on('mouseleave', 'div.column', function() {
    $(this).toggleClass("hover")
});
于 2012-05-07T01:44:41.743 回答
0

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

$("#game").find("div[id=r0c0]")
于 2012-05-07T01:43:53.273 回答