jQuery, zmiana koloru

pytanie zadane 25 maja 2017 w JavaScript przez Blue Obywatel (1,180 p.)

Witam, dlaczego pole nie zmienia koloru na zielony po zmianie na czerwony?

CodePen

4 odpowiedzi

odpowiedź 25 maja 2017 przez xmentor Nałogowiec (49,520 p.)

odpowiedź 25 maja 2017 przez Comandeer Guru (601,450 p.)

A jesteś pewien, że w background-color jest taki format koloru? Bo przeglądarki sobie to normalizują i tam można różne wartości znaleźć.

I dlatego lepiej operować klasami.

komentarz 25 maja 2017 przez Blue Obywatel (1,180 p.)

Przepraszam, że tak późno, ale nie miałem prądu. Nie jestem pewien, czy o to chodzi, ale format koloru powinien być w porządku, bo jeśli zmienię kolor w CSSie na crimson, to ta instrukcja zmiany koloru na zielony zadziała. Jak by było z klasami?

komentarz 25 maja 2017 przez Comandeer Guru (601,450 p.)

Trzeba by zastosować toggleClass.

komentarz 25 maja 2017 przez Blue Obywatel (1,180 p.)
edycja 25 maja 2017 przez Blue

Chodzi o to, by utworzyć klasę, w której background-color będzie ustawiony na green, i dołączyć ją, jeśli kolor będzie czerwony?

komentarz 25 maja 2017 przez Comandeer Guru (601,450 p.)

Tak. I oczywiście umieścić to wewnątrz obsługi klika… Bo teraz drugi if jest poza ;)

odpowiedź 25 maja 2017 przez Chess Szeryf (76,710 p.)
edycja 25 maja 2017 przez Chess

 <style>
div {
  margin-top: 50vh;
  margin-left: 50vw;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  transition: background-color 5s ease;
}
 </style>
<div id="el" onclick="x();"></div>
<script>
function x(){
    var el = document.getElementById('el');
    if(el.style.backgroundColor == 'deepskyblue'){
         el.style.backgroundColor = 'orange';
    }else{
        el.style.backgroundColor = 'deepskyblue';
    }
}
</script>

komentarz 25 maja 2017 przez xmentor Nałogowiec (49,520 p.)

Zdarzenia podpinamy używając addEventListener. Zamiast przypisywać style inline, przypisujmy klasy, które są odpowiednio ostylowane.

odpowiedź 25 maja 2017 przez Yiome Obywatel (1,000 p.)
edycja 25 maja 2017 przez Yiome

$(field).click(function() {
  this.style.backgroundColor = 'crimson';

  if ($(field).css('background-color') == "rgb(220, 20, 60)") {
         field.style.backgroundColor = 'green';
  }

});

Jak dorzucisz tego if'a w nawias to będzie :)

Samym jQuery:

$(field).click(function() {
  
  if( $(this).css('background-color') === "rgb(220, 20, 60)" )  
      $(this).css('background-color', 'green');
  else 
      $(this).css('background-color', 'crimson');
  
});