Próbuję zbudować menu wyboru i chcę zmienić kolor tła przycisku po kliknięciu. Używam tego kodu:

<div id="sort-contain">
    <div id="sort-select">
        Selected
    </div>
</div>

CSS:

#sort-select {
  background-color: lightgray;
}

.sort-select-active {
  background-color: grey;
}

I próbuję zastosować klasę sort-select-active do mojego div sort-select za pomocą tego kodu JS:

var selected = false;

select.onclick = (e) => {
    selected = !selected;

    if (selected)
      select.classList.add("sort-select-active");
    else 
      select.classList.remove("sort-select-active");
};

Klasa została pomyślnie dodana do elementu, ale kolor tła się nie zmienia. Czy istnieje konflikt między różnymi zdefiniowanymi kolorami tła?

5
user11914177 5 styczeń 2022, 14:08
 – 
Hendrik
5 styczeń 2022, 14:12
2
Identyfikatory mają pierwszeństwo przed klasami. Zatem #sort-select zawsze nadpisuje dodaną klasę.
 – 
Esszed
5 styczeń 2022, 14:12
Nie zdefiniowałeś zmiennej o nazwie select
 – 
Robo
5 styczeń 2022, 14:14

2 odpowiedzi

Najlepsza odpowiedź

Ustawiasz background-color przez id, a następnie ustawiasz przez class, pierwszy będzie zawsze stosowany, przyczyna ma wyższy priorytet. Zmień identyfikator #sort-select według klasy lub użyj stylów wbudowanych, takich jak:

var selected = false;

select.onclick = (e) => {
    selected = !selected;

    if (selected)
    
      slect.style.backgroundColor ="gray"
    else 
     slect.style.backgroundColor ="lightgray"
};

Lub dodaj !important słowo w ten sposób:

.sort-select-active {
  background-color: grey!important;
}
4
yousoumar 5 styczeń 2022, 14:31
Czy nie ma możliwości zmiany priorytetu?
 – 
user11914177
5 styczeń 2022, 14:18
1
Myślę, że tak, dodając słowo kluczowe !important. Zredagowałem swoją odpowiedź, spójrz.
 – 
yousoumar
5 styczeń 2022, 14:20
1
Możesz także zmienić selektor CSS na #sort-select.sort-select-active
 – 
Hendrik
5 styczeń 2022, 14:20
Dzięki, obie odpowiedzi działają
 – 
user11914177
5 styczeń 2022, 14:22
Cieszę się, że mogę pomóc.
 – 
yousoumar
5 styczeń 2022, 14:23

Spójrz na to. Dodałem !important w klasie css

var select = document.getElementById("sort-select")
var selected = false;

select.addEventListener("click", (e) => {
  selected = !selected;
  if (selected) {
    select.classList.add("sort-select-active");
  } else {
    select.classList.remove("sort-select-active");
  }

});
#sort-select {
  background-color: lightgray;
}

.sort-select-active {
  background-color: grey !important;
}
<div id="sort-contain">
  <div id="sort-select">
    Selected
  </div>
</div>
1
Harry Tom 5 styczeń 2022, 14:20