使用jQuery按類別選擇子div

我正在嘗試使用Javascript/jQuery創建內存遊戲。基本上，每個遊戲開始時會產生一個隨機數組，用戶的任務是匹配字母集合。我無法從數組中選擇單個字母。使用jQuery按類別選擇子div

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 div
#game .row .column
這些選項.column

無工作，僅選擇一個字母（其實，當我用任何東西，除了剛剛#game：我試着更換#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>

來源

2012-05-07 Lauren

您可以選擇兒童#game by $（「＃game」）。children（「。row」）？ –

你可以發佈生成的html，也可以在http://jsfiddle.net上放一個它的工作示例嗎？ – tw16

你試過$（'。row'）; ？ –

因爲你是動態生成你的來信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-07 01:44:41 j08691

這個作品 - 謝謝!!爲什麼使用.on（）與'mouseenter'和'mouseleave'工作，但簡單的.hover（）不？ – Lauren

因爲.hover（）試圖綁定到一個現有的元素，並且由於您動態創建了元素，所以它們還不存在。通過使用.on（），您可以綁定到現在或將來存在的任何元素（您可以在.on（）中使用.hover（），但我發現通過分別使用mouseenter和mouseleave事件更容易閱讀是.hover（）實際上在做什麼）。簽出有關[.on（）]（http://api.jquery.com/on/）的文檔，特別是「直接和委派事件」部分。 – j08691

會做，非常感謝。 – Lauren

可以使用僞類，並選擇該ID：

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

來源

2012-05-07 01:43:53 McGarnagle

有兩種方法可以做到這一點：

（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-07 01:55:16 brianff

使用jQuery按類別選擇子div

回答

相關問題