Выбор дочерних divs по классу с помощью jQuery

Question

Я пытаюсь создать игру с использованием 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 , функция зависания вообще не вызывается).

Каков правильный способ выбора дочерних divs по классам здесь?

Edit: Вот сгенерированный 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

Поскольку вы генерируете ваши письма дивы динамически, вы «Я хочу привязать события mouseenter и mouseleave к divs с помощью функции .on() jQuery. Попробуйте это:

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

Answer 2

Вы можете использовать псевдо-класс и выбрать на ID:

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

Answer 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; 
})