Forum PHP.pl > Zmiana tła div-a po kliknięciu i powrót po ponownym kliknięciu

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: Zmiana tła div-a po kliknięciu i powrót po ponownym kliknięciu

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

mariuszg

13.10.2013, 11:38:27

hej,

jak w jquery zrobić aby po kliknięciu na div-a zmienił się jego kolor a po ponownym klikcięciu wrócił do poprzedniego

w jedną stronę mam :

[PHP] pobierz, plaintext 
$(document).ready(function(){
	$('.dzien').click(function(){
		$(this).css("background","black");
	});
});
[PHP] pobierz, plaintext

kamil4u

13.10.2013, 11:54:20

Pseudokodem:

Kod

element.klikniecie( funkcja(){
  jeżeli( klikniętyElement.pobierzTło() == czarny ){
    kliknietyElement.nadajTło( czerwony );
  } jeśli nie {
    kliknietyElement.nadajTło( czarny);
  }
});

Teraz napisz czego ew. nie umiesz zrobić to pomożemy

Pozdrawiam

mariuszg

13.10.2013, 12:04:07

Nie wiem jak pobrać tło:

[PHP] pobierz, plaintext 
 
$('.dzien').click( funkcja(){
 
  if( $(this).pobierzTło() == "black" ){
		$(this).css("background","blue");
  } else{
		$(this).css("background","black");
  }
 
});
 
[PHP] pobierz, plaintext

kamil4u

13.10.2013, 12:13:21

Również za pomocą .css: http://api.jquery.com/css/

Zauważ, że zwracana wartość jest w postaci rgb(0, 0, 255) - jeśli chcesz to konwertować do hex-a to: http://wowmotty.blogspot.com/2009/06/conve...-hex-color.html

PrinceOfPersia

13.10.2013, 14:16:28

nie prościej użyć toggleClass z jQuery?
http://jsfiddle.net/pPaFG/1/

CSS:

Kod

.dzien {
  background:black;
  color:white;
  width:140px;
}
.marked {  background:red!important;
}

JS:

Kod

$(function() {
    $('.dzien').click(function() {
         $(this).toggleClass('marked');
    });
});

primosz67

28.10.2013, 18:29:55

napisz komponent z funkcją toggle .. a flagi nie wypuszczaj na zewnątrz

[PHP] pobierz, plaintext 
 
var DynamicBackground = function(css) {
    var me = this;
    this.jqComponent = $(css);
    this.state = false;
 
 
    this.toggle = function() {
    	if (me.state) {
    		me.state = false;
    		$(me.jqComponent).css("background", "red");
    	} else {
    		me.state = true;
    		$(me.jqComponent).css("background", "blue");
    	}
    };
};
 
 
var background  = new DynamicBackground(".spokoloko");
background.toggle();
 
[PHP] pobierz, plaintext

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.