Jqueryを使用してホバー上のユニットの背景色を変更する

Question

jqueryで作成されたdivテーブル内で、マウスを置いたときに色を変更し、マウスがセルを離れるときにその色を維持しようとしています。

.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

あなたのロジックは、2つの構文の問題とは別に正しいです。まず、mousenterとmouseleaveイベントが発生したときに、hover()に実行する機能を提供する必要があります。次に、unwrapする必要のあるdocument.readyハンドラをネストしました。修正したものでは正常に動作します。

ただし、ロジックを改善するためにいくつか調整を加えることができます。まず、すべての繰り返しで同じHTMLを追加すると、ネストされたループは冗長です。これを単一のループにすることができます。第2に、すべてのスタイリングをCSSで保つ方が良いので、単にaddClass()を使用して背景色を変更することができます。最後に、hover()は2つのイベントを作成します。そのうちのmouseleaveはコードに必要ではないため、mouseenterを使用すると効率が向上します。

：また、あなたは完全にループを削除し、あなたの .unit要素を作成するために、アレイの fill()方法を使用できることに注意してください

$(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>

：これを試してみてください、と述べているすべてで

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/