时间戳

首页 > 解决方案 > 使用 onclick 方法改变颜色的可点击网格

javascript - 使用 onclick 方法改变颜色的可点击网格

问题描述

所以我只是在学习如何使用 Jquery 制作一个可点击的网格，我很难找到如何让每个块在点击时改变颜色。我试图通过 addClass 方法为每个添加一个类。我的主要困难是找到每个都包含 onclick 或 changeColor 方法。

$('body').on('click', 'td', changeColor());

function generateGrid(rows, cols) {
  var grid = "<table>";
  for (row = 1; row <= rows; row++) {
    grid += "<tr>";
    for (col = 1; col <= cols; col++) {
      var cell = "<td> </td>";
      grid += cell;
    }
    grid += "</tr>";
  }
  $("#tableContainer").empty();
  $("#tableContainer").append(grid);
  return grid;
}

function changeColor() {

  this.addClass("clicked");
}
body {
  background-color: whitesmoke;
}

#tableContainer {
  display: table;
  padding: 1px;
  margin-right: auto;
  margin-left: auto;
}

td {
  border: 1px solid;
  width: 50px;
  height: 50px;
  padding: .5px;
  background-color: skyblue;
  display: table-cell;
  align-items: center;
  cursor: pointer;
}

td:hover {
  display: block;
  width: 100%;
  background-color: grey;
}

.clicked {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="a3.css">
<script src="a3.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<body>
  <!-- <input type = "button" id="bClick" onclick="myFunction()"> -->


  Rows: <input type="number" name="Rows" id="Rows"><br> Columns: <input type="number" name="Columns" id="Columns"><br> Mines: <input type="number" name="mines"> <br><br>

  <button onclick="generateGrid(document.getElementById('Rows').value, document.getElementById('Columns').value)"> Click for Grid </button>


  <div id="tableContainer"></div>

</body>

</html>

标签： javascriptjqueryhtmlcss

解决方案

您正在执行作为事件处理程序参数传递的函数，因此删除().

$(document.body).on('click', 'td', changeColor);

然后你就可以this在处理程序中使用了。

function changeColor() {
  const $this = $(this);
  if ($this.hasClass("clicked")) {
    $this.removeClass("clicked")
  } else {
    $this.addClass("clicked");
  }
}


$(document.body).on('click', 'td', changeColor);

function generateGrid(rows, cols) {
  var grid = "<table>";
  for (row = 1; row <= rows; row++) {
    grid += "<tr>";
    for (col = 1; col <= cols; col++) {
      var cell = "<td> </td>";
      grid += cell;
    }
    grid += "</tr>";
  }
  $("#tableContainer").empty();
  $("#tableContainer").append(grid);
  return grid;
}

function changeColor() {
  const $this = $(this);
  if ($this.hasClass("clicked")) {
    $this.removeClass("clicked")
  } else {
    $this.addClass("clicked");
  }
}
body {
  background-color: whitesmoke;
}

#tableContainer {
  display: table;
  padding: 1px;
  margin-right: auto;
  margin-left: auto;
}

td {
  border: 1px solid;
  width: 50px;
  height: 50px;
  padding: .5px;
  background-color: skyblue;
  display: table-cell;
  align-items: center;
  cursor: pointer;
}

td:hover {
  display: block;
  width: 100%;
  background-color: grey;
}

.clicked {
  background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="a3.css">
  <script src="a3.js"></script>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
  <!-- <input type = "button" id="bClick" onclick="myFunction()"> -->
  Rows: <input type="number" name="Rows" id="Rows"><br> Columns: <input type="number" name="Columns" id="Columns"><br> Mines: <input type="number" name="mines"> <br><br>
  <button onclick="generateGrid(document.getElementById('Rows').value, document.getElementById('Columns').value)"> Click for Grid </button>
  <div id="tableContainer"></div>
</body>
</html>

推荐阅读