jQueryで生成されたdivを変更するには？ここ

Question

完全なnoobの質問：

は、私はjQueryのによって生成されたdivのこの16×16のグリッドを持って

var rows = 16; 
 
var columns = 16; 
 
var $row = $("<div />", { 
 
    class: 'row' 
 
}); 
 
var $square = $("<div />", { 
 
    class: 'square' 
 
}); 
 

 
$(document).ready(function() { 
 
    for (var i = 0; i < columns; i++) { 
 
    $row.append($square.clone()); 
 
    } 
 

 
    for (var x = 0; x < rows; x++) { 
 
    $(".box_main").append($row.clone()); 
 
    } 
 
});

.row { 
 
    width: auto; 
 
    height: 40px; 
 
    background: #313131; 
 
} 
 
.square { 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 10px; 
 
    margin: 0; 
 
    display: inline-block; 
 
    background: #fff; 
 
}

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

私は何とか順ににaddClassとremoveClass（または何か他のもの）を使用することができますマウスの上にマウスを置いたときに、各divの背景色を1つずつ変更しますか？

私は何かを試してみましたが、これを行うことが可能かどうかはわかりません。

Answer 1

addClass()/removeClass()（またはJSも）は必要ありません。これは、:hover pseduoセレクタを単独で使用することで実現できます。これを試してみてください：

.square:hover { 
    background: #C00; /* amend colour as needed */ 
} 

の作業例：:hover pseduoセレクタの横に

var rows = 16; 
 
var columns = 16; 
 
var $row = $("<div />", { 
 
    class: 'row' 
 
}).appendTo('body'); 
 
var $square = $("<div />", { 
 
    class: 'square' 
 
}); 
 

 
$(document).ready(function() { 
 
    for (var i = 0; i < columns; i++) { 
 
    $row.append($square.clone()); 
 
    } 
 

 
    for (var x = 0; x < rows; x++) { 
 
    $(".box_main").append($row.clone()); 
 
    } 
 
});

body { 
 
    background: #313131; 
 
} 
 
.row { 
 
    width: auto; 
 
    height: 40px; 
 
    background: #313131; 
 
} 
 
.square { 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 10px; 
 
    margin: 0; 
 
    display: inline-block; 
 
    background: #fff; 
 
} 
 
.square:hover { 
 
    background: #C00; 
 
}

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

Answer 2

が、あなたはおそらく、それはなるだろうJS（とそれに実際のクラスを追加する必要があるかもしれません以上他のイベントによって引き起こされた場合の感覚）、それにもかかわらずJS（addClass/removeClass）を使用する例がここにあります。

var rows = 16; 
 
var columns = 16; 
 
var $row = $("<div />", { 
 
    class: 'row' 
 
}); 
 
var $square = $("<div />", { 
 
    class: 'square' 
 
}); 
 
$row.appendTo('body'); 
 

 
$(document).ready(function() { 
 
    for (var i = 0; i < columns; i++) { 
 
    $row.append($square.clone()); 
 
    } 
 

 
    for (var x = 0; x < rows; x++) { 
 
    $(".box_main").append($row.clone()); 
 
    } 
 

 
    $('.square').hover(function() { $(this).addClass('hovering'); }, function() { $(this).removeClass('hovering'); }); 
 
});

.row { 
 
    width: auto; 
 
    height: 40px; 
 
    background-color: #313131; 
 
} 
 
.square { 
 
    width: 40px; 
 
    height: 40px; 
 
    border-radius: 10px; 
 
    margin: 0; 
 
    display: inline-block; 
 
    background-color: #fff; 
 
} 
 
.hovering { 
 
    background-color: cyan; 
 
    border: 3px dashed blue; 
 
    width: 34px; 
 
    height: 34px; 
 
}

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