Переключить класс нескольких идентификаторов (javascript) - PullRequest
Новая
       3

Переключить класс нескольких идентификаторов (javascript)

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

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

Вот код, который работает , если элементы еще не имеют цвет фона : 

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 #999;
      text-align: center;
      color: black;
      cursor: pointer;
    }

      background-color: red;
    }
  </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">
    $("#button_1").click(function() {
      $('#button_1').toggleClass('selected');
    });
    $("#button_2").click(function() {
      $('#button_2').toggleClass('selected');
    });
  </script>
</body>
</html>

Однако, если я назначу каждому идентификатору цвет фона, они не меняйте цвет при клике: 

  <style media="screen">
    .buttons {
      width: 150px;
      height: 50px;
      border: solid 2px #999;
      text-align: center;
      color: black;
      cursor: pointer;
    }

    #button_1 {
      background-color: blue;
    }

    #button_2 {
      background-color: green;
    }

    .selected {
      background-color: red;
    }

Также есть способ написать одну функцию, которая при клике окрашивает каждый элемент в красный цвет? (Вместо того, чтобы написать функцию для каждой кнопки. У меня в конечном итоге будет 8 кнопок.) Спасибо! Буду признателен за любую помощь!

Ответы [ 5 ]

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

Прежде всего класс .selected будет применяться каждый раз, но из-за приоритета селектора он будет перезаписан на .button. Таким образом, существует множество способов исправить это.

Вы можете использовать ключевое слово !important (вообще не рекомендуется) 

.selected {
  background-color: red !important;
}

ПРИМЕЧАНИЕ: Вы следует избегать использования клавиатуры !important как можно чаще, но в вашем конкретном случае это лучший способ сделать это, но я настоятельно рекомендую изменить ваш стиль и использовать селектор pseudo-class для ваши основные классы вместо. просто так: 

.buttons:first-of-type {
  background-color: blue;
}

.buttons:nth-of-type(2) {
  background-color: green;
}

/* and so on */

И использовать метод спецификаций c для вашего selected класса примерно так: 

.buttons.selected {
  background-color: red;
}

Или

Вы можете использовать прямой, но повторяющийся подход. Сделайте так, чтобы ваш .selected селектор классов был примерно таким: 

#button_1.selected, #button_2.selected /* and so on */ {
  background-color: red;
}

Также для упрощения кода js вы можете сделать следующее: 

$('.buttons').click(function () {
  $(this).toggleClass("selected"); // $(this) keyword will refer to the clicked button, each time attribute with class buttons got clicked.
});
0 голосов
/ 03 мая 2020

Если вы хотите добавить класс «.selected» для каждой кнопки, чтобы вы могли попробовать этот, я надеюсь, это вам очень поможет. 

$("button").each(function(){
   $(this).on("click", function(){
        $(this).toggleClass('.selected');
   });
});
0 голосов
/ 03 мая 2020

Вот чистый метод JS.

Вы захотите использовать querySelectorAll ('. Buttons'). 

const buttons = document.querySelectorAll('.buttons')

Это создаст список узлов всех объектов. с классом. кнопки.

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

buttons.forEach(button=>{
button.addEventListener('click', ()=>{})

Затем вы можете написать функцию для нажатия кнопки. 

const buttons = document.querySelectorAll('.buttons');
buttons.forEach(button=>{
    button.addEventListener('click', ()=>{
        button.classList.toggle('selected')
    })
})

Это будет обновляться автоматически при добавлении элементов с классом кнопок.

А затем, как уже упоминалось, добавьте! Важное для свойства background-color класса .selected.

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

Я думаю, что ваша проблема в CSS Специфичность.

Селектор идентификатора (#) будет иметь более высокую специфичность, чем селектор класса (.) Попробуйте изменить 

.selected {
  background-color: red;
}

на 

 #button_1.selected, #button_2.selected {
  background-color: red;
}
0 голосов
/ 03 мая 2020

Просто добавьте фоновый цвет: красный! Важный;

РЕДАКТИРОВАТЬ

Вы можете использовать это как одну функцию по запросу. 

$('.buttons').click(function(e) {
    e.stopPropagation();
    $(this).toggleClass('selected');
});


    $("#button_1").click(function() {
      $('#button_1').toggleClass('selected');
    });
    $("#button_2").click(function() {
      $('#button_2').toggleClass('selected');
    });
    .buttons {
      width: 150px;
      height: 50px;
      border: solid 2px #999;
      text-align: center;
      color: black;
      cursor: pointer;
    }

    #button_1 {
      background-color: blue;
    }

    #button_2 {
      background-color: green;
    }

    .selected {
      background-color: red !important;
    }
<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 #999;
      text-align: center;
      color: black;
      cursor: pointer;
    }

      background-color: red;
    }
  </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>

</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...