Изменить цвет фона элемента при наведении с помощью JQuery

Question

Я пытаюсь получить ячейку в таблице div, созданной в jquery, для изменения цвета, когда я навис над ним и остаюсь тем же цветом, когда мышь покидает ячейку.

Я попытался добавить команду .hover, но когда я добавлю, вся сетка уйдет.

Вот мой код на JSfiddle: https://jsfiddle.net/davidtaylorjr/eemLsjg7/8/

$(document).ready(function() { 
 
    $(function() { 
 
    for (var x = 0; x < 16; x++) { 
 
     for (var y = 0; y < 16; y++) { 
 
     $("<div>").addClass("unit").appendTo('#container'); 
 
     } 
 
    } 
 
    }); 
 
    
 
    $(".unit").hover() { 
 
    $(this).css("background-color", "black"); 
 
    }); 
 
});

#container { 
 
    background-color: lightblue; 
 
    height: 192px; 
 
    width: 192px; 
 
} 
 
.unit { 
 
    background-color: white; 
 
    height: 10px; 
 
    width: 10px; 
 
    margin: 1px; 
 
    float: left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"></div>

Answer 1

Ваша логика верна в стороне от двух вопросов синтаксиса. Во-первых, вам необходимо предоставить функцию hover(), которая должна выполняться при пожаре событий mousenter и mouseleave. Во-вторых, у вас есть вложенные обработчики document.ready, которые вы должны развернуть. С этими исправлениями он работает нормально.

Обратите внимание, что вы можете сделать пару настроек, чтобы улучшить логику. Во-первых, вложенные циклы являются избыточными, поскольку вы добавляете один и тот же HTML во всех итерациях. Вы можете сделать это одним циклом. Во-вторых, лучше придерживаться всех стилей в CSS, поэтому вы можете просто использовать addClass(), чтобы изменить цвет фона. Наконец, hover() создает два события, из которых mouseleave не нужен для вашего кода, поэтому вы можете использовать только mouseenter, чтобы сделать его более эффективным.

С учетом всего сказанного, попробуйте следующее:

$(document).ready(function() { 
 
    var html = '' 
 
    for (var x = 0; x < 16 * 16; x++) { 
 
    html += '<div class="unit"></div>'; 
 
    } 
 
    $(html).appendTo('#container'); 
 

 
    $(".unit").mouseenter(function() { 
 
    $(this).addClass('black'); 
 
    }); 
 
});

#container { 
 
    background-color: lightblue; 
 
    height: 192px; 
 
    width: 192px; 
 
} 
 
.unit { 
 
    background-color: white; 
 
    height: 10px; 
 
    width: 10px; 
 
    margin: 1px; 
 
    float: left; 
 
} 
 
.unit.black { 
 
    background-color: #000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"></div>

Также обратите внимание, что вы можете удалить цикл вообще и использовать метод fill() массива для создания .unit элементов:

var arr = new Array(256); 
arr.fill('<div class="unit"></div>'); 
$('#container').html(arr.join('')); 

Обратите внимание, что это не поддерживается в IE и Safari, хотя полипол доступны в MDN

Answer 2

Ниже изменит цвет фона элемента, когда мышь входит, а затем отвязать обработчик (так что код будет выполняться только на первом mouseenter - как указано в описании)

$(".unit").mouseenter(function() { 
    $(this).css("background-color", "black"); 
    $(this).unbind('mouseenter'); 
}); 

JQuery MouseEnter документация для справки: https://api.jquery.com/mouseenter/#mouseenter-handler

Обновлено (и упрощен для демонстрации) скрипка: https://jsfiddle.net/eemLsjg7/9/