时间戳

首页 > 解决方案 > 切换背景颜色类，但一次只有一个元素

javascript - 切换背景颜色类，但一次只有一个元素

问题描述

我有多个元素在单击时变为红色背景色。但是，我只需要最后一个被点击的元素变为红色，而所有其他元素都恢复为原来的背景色。

现在，如果您单击所有按钮，它们都将是红色的。这是我的代码的玩具版本。

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style media="screen">
    .buttons {
      width: 150px;
      height: 50px;
      border: solid 2px white;
      text-align: center;
      color: black;
      cursor: pointer;
    }

    #buttonGallery {
      margin: 10px;
      padding: 10px;
      border: solid 2px black;
      width: 155px;
    }

    #button_1 {
      background-color: #ffcc66;
    }

    #button_2 {
      background-color: #99ffff;
    }

.buttons:hover {
      background-color: red !important;
      border: solid 3px black !important;
    }

    .selected {
      background-color: red !important;
      border: solid 3px black !important;
    }
  </style>
</head>

<body>

  <div id="buttonGallery">
    <div id="button_1" class="buttons">
      <p>button_1</p>
    </div>
    <div id="button_2" class="buttons">
      <p>button_2</p>
    </div>

</div>

  <script type="text/javascript">
    $('.buttons').click(function() {
      $(this).toggleClass("selected");
    });
  </script>
</body>

</html>

这个链接似乎很有帮助，但我是编码新手，无法在 jsFiddle 之外复制代码：jquery change background of one element at time

提前谢谢大家！

标签： javascripthtmlcss

解决方案

您可以在添加类之前清除所有选择的按钮。

<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style media="screen">
    .buttons {
      width: 150px;
      height: 50px;
      border: solid 2px white;
      text-align: center;
      color: black;
      cursor: pointer;
    }

    #buttonGallery {
      margin: 10px;
      padding: 10px;
      border: solid 2px black;
      width: 155px;
    }

    #button_1 {
      background-color: #ffcc66;
    }

    #button_2 {
      background-color: #99ffff;
    }

.buttons:hover {
      background-color: red !important;
      border: solid 3px black !important;
    }

    .selected {
      background-color: red !important;
      border: solid 3px black !important;
    }
  </style>
</head>

<body>

  <div id="buttonGallery">
    <div id="button_1" class="buttons">
      <p>button_1</p>
    </div>
    <div id="button_2" class="buttons">
      <p>button_2</p>
    </div>

</div>

  <script type="text/javascript">
    $('.buttons').click(function() {
      $('.buttons').removeClass("selected");
      $(this).toggleClass("selected");
    });
  </script>
</body>

</html>

推荐阅读