Tengo varios elementos que cambian al color de fondo rojo cuando se hace clic. Sin embargo, necesito solo que el último elemento en el que se hace clic sea rojo y todos los demás elementos que hayan vuelto a su color de fondo anterior.

En este momento, si hace clic en todos los botones, todos serán rojos. Aquí está la versión de juguete de mi código.

<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>

Este enlace parecía útil, pero soy nuevo en la codificación y no he podido replicar el código fuera de jsFiddle: jquery cambia el fondo de un elemento a la vez

Gracias a todos de antemano!

0
psychcoder 3 may. 2020 a las 03:15

2 respuestas

La mejor respuesta

Puede borrar todos los botones de seleccionados antes de agregar la clase.

<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>
0
user120242 3 may. 2020 a las 00:20

Aquí está la solución. simplemente puede eliminar la clase de todos los botones primero y luego alternar la clase del botón actual

<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").not($(this)).removeClass("selected");
      $(this).toggleClass("selected");
    });
  </script>
</body>

</html>
0
Anees Ijaz 3 may. 2020 a las 00:21