jQuery: rendere permanenti le variazioni di CSS

**ganesha** · 18-11-2011, 11:36

Buongiorno a tutti!

Posto subito un codice di esempio per illustrare il problema che mi si presenta:

codice:

<html>
<head>
<script type="text/javascript" src="http://common.html.it/js/jquery.pack.js"></script>

<script type="text/javascript">
var counter=0;
$(function(){
	$("#chkChangeColor").change(function(){
		if($(this).is(":checked"))
			$(".lblDato").css('background-color','red')
		else
			$(".lblDato").css('background-color','yellow');
	});
	
	setInterval("aggiornaHtml()", 5000);
});

function aggiornaHtml(){
	$("#content").html('<input type="text" id="Dato" class="lblDato" value="' + (++counter) + '" />');	
}

</script>
</head>

<body>
<style rel="stylesheet" type="text/css">
	.lblDato{
		color:blue;
		background-color:yellow;
	}
</style>
<p id="content">	
	<input type="text" id="Dato" class="lblDato" value="abcd" />
</p>
sfondo rosso <input type="checkbox" id="chkChangeColor" />
</body>
</html>

spuntando la checkbox modifico lo sfondo della casella di testo agendo sul css.

Quando la funzione aggiornaHtml sostituisce la casella di testo con una nuova, il colore di sfondo torna al default. Questo mi fa pensare che l'istruzione $(".lblDato").css('background-color','red') agisce sugli oggetti presenti nella pagina che hanno classe uguale a lblDato e non sulla classe stessa!

La domanda è:
esiste un modo per agire sui fogli di stile così che, creando un nuovo oggetto, questo prenda gli attributi della classe modificata?

**Vindav** · 18-11-2011, 12:10

Quindi quello che vuoi fare è modificare il css? è un operazione abbastanza complessa sei sicuro ti convenga? Se devi cambiare solo il colore non ti conviene crearti due classi con i colori diversi e applicare queste classi agli oggetti interessati?

**ganesha** · 18-11-2011, 12:35

Originariamente inviato da Vindav
Quindi quello che vuoi fare è modificare il css? è un operazione abbastanza complessa sei sicuro ti convenga? Se devi cambiare solo il colore non ti conviene crearti due classi con i colori diversi e applicare queste classi agli oggetti interessati?

No, forse non mi conviene...

Devo cambiare solamente lo stile visibility per nascondere o visualizzare le label descrittive poste sopra a degli oggetti creati dinamicamente.

Tu dici che mi converrebbe creare due classi... Quindi dovrei gestire la visibilità in due punti differenti:
- quando viene checkata o meno la checkbox (dovrei rintracciare tutte le label a cambiare il valore di class)
- e ad ogni aggiornamento degli oggetti che contengono le label (andando a controllare lo stato della checkbox per mettere la classe giusta)

giusto?

**Vindav** · 18-11-2011, 12:50

beh è piu semplice di quanto sembra... tu sai che di default tutte le label hanno lo sfondo giallo giusto? quindi dovrebbe bastare questo:

codice:

var currentClassName = 'lblDatoYellow';
$(function(){
	$("#chkChangeColor").change(function(){
		if($(this).is(":checked")){
			$(".lblDatoYellow").attr('class','lblDatoRed');
                        currentClassName = 'lblDatoRed';
		}else{
			$(".lblDatoRed").attr('class','lblDatoYellow')
                        currentClassName = 'lblDatoYellow';
                }
	});
	
	setInterval("aggiornaHtml()", 5000);
});

function aggiornaHtml(){
	$("#content").html('<input type="text" id="Dato" class="'+currentClassName+'" value="' + (++counter) + '" />');	
}

**ganesha** · 18-11-2011, 13:07

Perfetto!
Grazie

Discussione: jQuery: rendere permanenti le variazioni di CSS

Strumenti discussione

Ricerca discussione

Visualizza

jQuery: rendere permanenti le variazioni di CSS

Permessi di invio