时间戳

首页 > 解决方案 > 每次点击改变背景

javascript - 每次点击改变背景

问题描述

我的问题是，当我点击 TR 标签时，它会显示一种颜色，当我再次点击时，背景颜色会消失，到目前为止一切都很好。但是当我再次点击时，颜色不显示问题出在哪里？？

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
$('.tr').click(function() {
  $('.tr').css("background-color", "");
  $(this).css({
    "background-color": getRandomColor()
  });
  $(this).click(function() {
    $(this).css("background-color", "initial");
  });
})
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <table class="table table-bordered table-hover w-99">
    <tbody>
      <tr class="tr">
        <td>654</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</body>

</html>

标签： javascripthtmljquerycss

解决方案

刚刚删除了一些代码并添加了 cssuser-select: none;以防止多次单击后选择文本。

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
$('.tr').click(function() {
   console.log(getRandomColor())
  $('.tr').css("background-color", getRandomColor());
})
td {
 user-select: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="css/style.css">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <table class="table table-bordered table-hover w-99">
    <tbody>
      <tr class="tr">
        <td>654</td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</body>

</html>

提示：当背景太暗时，请注意将字体颜色切换为白色。也许有一个 jQuery 方法来检测对比度。

推荐阅读