如何修改由jQuery生成的div？

Question

完全小白的问题在这里：

我的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（或其他东西），以将鼠标悬停在/ mouseenter上时，逐个更改每个div的背景颜色？

我尝试了一些东西，但我甚至不确定是否可以或不这样做。

Answer 1

addClass()/removeClass()（或者甚至JS）不需要这个 - 你可以使用单独的CSS的:hover pseduo选择器来实现它。试试这个：

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

工作例如：

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

的:hover pseduo选择旁边，你可能需要一个实际的类添加到它与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>