我正在尝试使用 Javascript/jQuery 创建一个内存游戏。基本上,在每个游戏开始时都会生成一个随机数组,用户的任务是匹配字母组。我无法从数组中选择单个字母。
Here's a link 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
这些选项都无法仅选择一个字母(事实上,当我使用除 #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>
最佳答案
有两种方法可以做到这一点:
(1) 所有 CSS
div#game div:hover {
background-color: #A6977B;
}
(2)使用Jquery
$('#game div').hover(function(){
$('#game div').removeClass('hover');
$(this).addClass('hover');
return false;
})
关于javascript - 使用 jQuery 按类选择子 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10475710/