如何修改jQuery生成的div？

Question

在这里完成菜鸟问题：

我有这个由 jQuery 生成的 16x16 div 网格

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 上悬停/mouseenter 时一一更改背景颜色？

我尝试过解决一些问题，但我什至不确定是否可以这样做。

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>