javascript - div 在 click() 上不保留 CSS 属性

Question

我有一个函数可以创建一个 div 网格，当文档加载时(或当用户重置它时)生成并发送到容器 div。当将鼠标悬停在 div 上时，它们会突出显示(改变颜色)。当用户单击突出显示的 div 时，它会变为黑色。出于某种原因，当我将鼠标悬停在另一个 div 上时，黑色的 div 会恢复为原始颜色。我很困惑为什么会这样。任何帮助或指导将不胜感激。这是我的 jsfiddle 示例:https://jsfiddle.net/psyonix/1g9p59bx/79/

var d = ("<div class='square'></div>");

function createGrid(numSquares) {
    var area = $('#g_area');
    var squareSize = Math.floor(area.innerWidth() / numSquares);
    for (var i = 0, len = (numSquares * numSquares); i < len; i++) {
        area.append(d);
    }

    $('.square')
        .height(squareSize)
        .width(squareSize)
        .hover(

    function () {
        $(this).css({
            'background-color': '#FFFFFF'
        });
    }, function () {
        $(this).css({
            'background-color': '#C8C8C8'
        });
    })
        .click(

    function () {
        $(this).css({
            'background-color': '#000000'
        });
    });
}

function resetGrid() {
    $(".square").remove();

}

$(document).ready(function () {
    createGrid(8);

    $("#button").click(function () {
        var numSquares = prompt("Please enter the size");
        resetGrid(numSquares);
        createGrid(numSquares);
    });

});

Answer 1

一旦你点击一个DIV，你应该维护一个标志，告诉你悬停功能停止改变颜色

$('.square')
    .height(squareSize)
    .width(squareSize)
    .hover(

function () {
    if ($(this).data("clicked")) return; //ADDED LINE
    $(this).css({
        'background-color': '#FFFFFF'
    });
}, function () {
    if ($(this).data("clicked")) return; //ADDED LINE
    $(this).css({
        'background-color': '#C8C8C8'
    });
})
    .click(

function () {
    $(this).data("clicked", true); //ADDED LINE
    $(this).css({
        'background-color': '#000000'
    });
});