Переключить класс цвета фона, но только один элемент за раз - PullRequest
Новая
       4

Переключить класс цвета фона, но только один элемент за раз

0 голосов
/ 03 мая 2020

У меня есть несколько элементов, которые меняют цвет фона на красный при нажатии. Однако мне нужно, чтобы only последний элемент, по которому щелкнули, был красным, а все остальные элементы вернулись к своему прежнему цвету фона.

Прямо сейчас, если вы нажмете все кнопки, все они будут красными. Вот игрушечная версия моего кода. 

<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 изменить фон одного элемент за один раз

Спасибо всем заранее!

Ответы [ 2 ]

0 голосов
/ 03 мая 2020

вот решение. сначала вы можете просто удалить класс из всех кнопок, а затем переключить класс текущей кнопки 

<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 голосов
/ 03 мая 2020

Вы можете просто очистить все выбранные кнопки перед добавлением класса. 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...