使用jQuery更改div的颜色

Question

我正在尝试使用jQuery更改单个div的颜色。 我80％确信我的代码可以正常工作，但是我不确定为什么它无法正常工作。 我试图使用许多不同方法的负载，例如mouseenter，hover，addClass，toggleClass等。但是对于我一生来说，我不知道发生了什么。 请帮助？

JAVASCRIPT

$(document).ready(function(){
blackMode();
genDivs(10);

});

/* Black mode - changes colours of cells to black */
function blackMode() {
$('.cell').hover(
    function (){
        $(this).css({"background-color":"black"});   
    },
    function (){
        $(this).css({"background-color":"white"});
    });
}

/* creates the divs in a 10x10 grid */

function genDivs(v) {
    var e = document.getElementById('container'); //This is what we want to append the rows
    for (var i = 0; i < v; i++) {
        var row = document.createElement("div"); // This creates each row that is selected.
        row.className="row"; // This declares the class name for the created div.
        for(var j = 0; j < v; j++) {
            var cell = document.createElement("div");
            cell.className="cell";
            row.appendChild(cell);
        }
        e.appendChild(row);
    }
}

的HTML

<html>
<head>
    <script type="text/javascript" src="jquery-1.11.3.min.js"></script>
    <script src="Script.js"></script>
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />
    <link rel="stylesheet" type="text/css" href="Stylesheet.css"></link>
</head>
<body>
    <h1 class="title">Etch-a-Sketch</h1>
    <div id="container">

    </div>
</body>

Answer 1

更新：

抱歉，我没有注意到您实际上在要动态插入的元素上使用.cell类-但仍给它们一些高度和更重要的意义->首先插入元素，然后使用jQuery绑定事件：

$(document).ready(function(){
    genDivs(10);
    blackMode();
});

另一个小提琴

您之前使用的版本无法正常工作，因为在您调用blackMode函数（该函数应用了悬停处理程序）时，没有.cell类的元素位于DOM中。

原始答案：

您正在将悬停函数应用于具有单元格类的元素，但尚未在HTML中使用它。 另外，当您的div没有内容时，其高度将为0px，并且效果将不可见。

将.cell类添加到您的div中：

<div class="cell">
</div>

并通过CSS赋予高度（或在其中添加某物）：

.cell {
    height: 400px;
}

jsfiddle

使用jQuery更改div的颜色

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-08-01 21:40:00

使用jQuery更改div的颜色

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-08-01 21:40:00

解决方案1
2 已采纳 2015-08-01 21:40:00