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类 - 但仍然给它们一些高度和更重要的 - ＆gt;首先插入元素，然后使用jQuery绑定事件：

setkey(setDT(A),Name)

another fiddle

之前的版本没有用，因为当你调用应用悬停处理程序的blackMode函数时，没有带有类.cell的元素在DOM中。

原始回答：

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

将.cell类添加到div：

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

通过CSS给它一些高度（或在里面添加......）：

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

jsfiddle

使用jQuery更改div的颜色

1 个答案: