Newsgroup: it.comp.lang.javascript
Titolo: Leggere classe sostituita con jquery

Ho una serie di div con la stessa classe, tutti meno 1 che ha classe 
diversa.
All'interno di ogni div di c'è una lettera con link.
Andando su ciascuna di esse il colore di fondo da rosso diventa giallo, 
ed uscendo ritorna rosso.
Quando viene fatto click sul link il colore diviene giallo (Viene fatto 
cambiando la classe e sembra funzionare) e dovrebbe rimanere cosi fino a 
che non viene fatto click su di un'altra lettera.
Dopo il click, all'uscita dal div, questo dovrebbe rimanere giallo.
L'idea era quella di leggere la classe cambiata e se era ATTIVA (cioè 
fondo giallo) non veniva cambiato il colore di fondo.
Purtroppo con
if($('.Ls').hasClass('Liv') ){
alert('Liv!');
}
else {alert("No");}
viene letta la vecchia classe ed all'uscota  torna rosso.
Ho controllato e so che diviene giallo perché disattivando il comando in 
mouse leave è facile controllarlo.
Sbagli a leggere la classe in quel modo?
Esiste un metodo live per cambiare la classe in modo da fare rileggere 
la classe giusta?
Questo è il codice completo,
 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento senza titolo</title>
 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 
<script type="text/javascript">
       $(document).ready(function() {
 
$(".Liv").mouseenter(function(){
$(this).css("background-color","#FFFF00");
$('a', this).css('color','#000');
});
 
$(".Liv").mouseleave(function(){
 
if($('.Ls').hasClass('Liv') ){
alert('Liv!');
}	
else
{alert("No");}
 
$(this).css("background-color","#800000");
$('a', this).css('color','#FFF');
});
 
$('.Liv').click(function(){
$(".ATTIVA").removeClass('ATTIVA').addClass("Liv"); // classe ex attiva
$(this).removeClass('Liv').addClass("ATTIVA");
});
 
 
       });
     </script>
 
<style>
#Lettere{border:1px solid #FF0000;
	width:150px;
	height:150px;
	}
 
.ATTIVA,.Liv{border:1px solid #FFF;
	width:26px;
	height:26px;
	font-family: "Comic Sans MS", Arial, cursive;
	font-size:.8em;
	line-height: 2em;
	border: 1px solid #000;
	text-align:center;
	float:left;
	}
 
.Liv{background-color: #800000;}
 
.Liv a:link {text-decoration: none; color: #fff;}
.Liv a:visited {text-decoration: none;color: #fff;}
.Liv a:hover {text-decoration: none;}
.Liv a:active {text-decoration: none;color: #fff;}
 
.ATTIVA{background-color: #FFFF00;}
 
.ATTIVA a:link {text-decoration: none; color: #000;}
.ATTIVA a:visited {text-decoration: none;color: #000;}
.ATTIVA a:hover {text-decoration: none;}
.ATTIVA a:active {text-decoration: none;color: #000;}
 
 
</style>
 
</head>
 
<body>
 
<div id="Lettere">
 
<div class="Liv Ls"><a href="#" title="A"><span>A</span></a></div>
<div class="Liv Ls"><a href="#" title="B"><span>B</span></a></div>
<div class="ATTIVA Ls"><a href="#" title="C"><span>C</span></a></div>
<div class="Liv Ls"><a href="#" title="D"><span>D</span></a></div>
<div class="Liv Ls"><a href="#" title="E"><span>E</span></a></div>
<div class="Liv Ls"><a href="#" title="E"><span>D</span></a></div>
<div class="Liv Ls"><a href="#" title="F"><span>E</span></a></div>
</div>
 
</body>
</html>
 
Altri suggerimenti?
Grazie ha chi mi vorrà dare una mano.
Leonardo
 
-- 
Non sono su facebook
Se anche tu vuoi cancellarti
http://www.giardiniblog.com/come-cancellarsi-da-facebook-eliminare-account/
 

 if($('.Ls').hasClass('Liv') ){
 
La query che fai restituisce tutti gli elementi con classe "Ls" mentre 
probabilmente tu ne vuoi uno in particolare.
 
Applicando "hasClass" a un elenco di elementi credo che jQuery usi una 
sorta di "some"; ovvero restituisca true se almeno un elemento possiede 
tale classe.

 che non viene fatto click su di un'altra lettera.
 
<div id="Lettere">
 <div class="Liv Ls"><a href="#" title="A"><span>A</span></a></div>
 <div class="Liv Ls"><a href="#" title="B"><span>B</span></a></div>
 <div class="ATTIVA Ls"><a href="#" title="C"><span>C</span></a></div>
 <div class="Liv Ls"><a href="#" title="D"><span>D</span></a></div>
 <div class="Liv Ls"><a href="#" title="E"><span>E</span></a></div>
 <div class="Liv Ls"><a href="#" title="E"><span>D</span></a></div>
 <div class="Liv Ls"><a href="#" title="F"><span>E</span></a></div>
</div>
 
css:
 
div.Ls { background-color: red; }
div.Ls:hover { background-color: yellow; }
div.Ls.ATTIVA { background-color: yellow; }
 
js:
 
$('#Lettere').on('click', 'div.Ls', function() {
 $('#Lettere div.Ls').removeClass('ATTIVA');
 $(this).addClass('ATTIVA');
});
 
 
Dovrebbe funzionare dappertutto, tranne forse in IE6. Ricordandoti di 
mettere il doctype, come hai fatto.
 
E hai eliminato quasi il 70% del tuo codice. :P
 
Bye.
 


 
Ciao, ti ringrazio per la risposta.
Ho provato con chrome, firefox ed explorer ultime verioni
Però il codice che mi ha postato non funziona perché al click su 
lettera, questa scatta in basso.
Te lo posto come lo ho copincollato, perché forse ho sbagliato nel farlo.
 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento senza titolo</title>
 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 
<script type="text/javascript">
       $(document).ready(function() {
 
$('#Lettere').on('click', 'div.Ls', function() {
  $('#Lettere div.Ls').removeClass('ATTIVA');
  $(this).addClass('ATTIVA');
});
 
 
       });
     </script>
 
<style>
#Lettere{border:1px solid #FF0000;
	width:150px;
	height:150px;
	}
 
.ATTIVA,.Liv{border:1px solid #FFF;
	width:26px;
	height:26px;
	font-family: "Comic Sans MS", Arial, cursive;
	font-size:.8em;
	line-height: 2em;
	border: 1px solid #000;
	text-align:center;
	float:left;
	}
 
.Liv{background-color: #800000;}
 
.Liv a:link {text-decoration: none; color: #fff;}
.Liv a:visited {text-decoration: none;color: #fff;}
.Liv a:hover {text-decoration: none;}
.Liv a:active {text-decoration: none;color: #fff;}
 
 
div.Ls { background-color: red; }
div.Ls:hover { background-color: yellow; }
div.Ls.ATTIVA { background-color: yellow; }
 
</style>
 
</head>
 
<body>
 
<div id="Lettere">
  <div class="Liv Ls"><a href="#" title="A"><span>A</span></a></div>
  <div class="Liv Ls"><a href="#" title="B"><span>B</span></a></div>
  <div class="ATTIVA Ls"><a href="#" title="C"><span>C</span></a></div>
  <div class="Liv Ls"><a href="#" title="D"><span>D</span></a></div>
  <div class="Liv Ls"><a href="#" title="E"><span>E</span></a></div>
  <div class="Liv Ls"><a href="#" title="E"><span>D</span></a></div>
  <div class="Liv Ls"><a href="#" title="F"><span>E</span></a></div>
</div>
 
</body>
</html>
 
Saluti
Leoanardo



Salve, nel frattempo ho elaborato un codice diverso, più breve e mi pare 
funzioni meglio.
Quello che non mi convince è il ciclo $(".Liv").each(function() per 
attivare la lettera "A" all'apertura della pagina (ma cambiando if(a==0) 
con altro numero può essere qualsiasi lettera).
Qual'è la sintassi per attivare una lettera a piacere all'avvio?
Ho sbagliato a copincollare il codice dell'altro post?
Saluti
Leonardo
 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento senza titolo</title>
 
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
 
<script type="text/javascript">
 
var Rosso = "#800000";
var Giallo ="#FFFF00";
var Nero = "#000";
var Bianco = "#FFF";
var FattoClick = false;
 
$(document).ready(function() {
 
$(".Liv").mouseenter(function(){
if($('a', this).css('color') == "rgb(0, 0, 0)"){FattoClick = true;} // è 
attivo da prima di entrare
$(this).css("background-color",Giallo);
$('a', this).css('color',Nero);
});
 
 
$(".Liv").mouseleave(function(){
if(FattoClick == false)
{	
$(this).css("background-color",Rosso);
$('a', this).css('color',Bianco);
}
FattoClick = false;
});
 
 
$('.Liv').click(function(){	
$('.Liv').css("background-color",Rosso);
$('a').css('color',Bianco);
 
FattoClick = true; // alert(FattoClick);
$(this).css("background-color",Giallo);
$('a', this).css('color',Nero);
});
 
});
</script>
 
<script>
function Inizializza()
{
var a = 0;
$(".Liv").each(function(){
if(a==0)
{
$(this).css("background-color","#FFFF00");
$('a', this).css('color','#000');
}
a++;
});
}
</script>
 
 
<style>
#Lettere{border:1px solid #FF0000;
	width:150px;
	height:150px;
	}
 
.Liv{border:1px solid #FFF;
	width:26px;
	height:26px;
	font-family: "Comic Sans MS", Arial, cursive;
	font-size:.8em;
	line-height: 2em;
	border: 1px solid #000;
	text-align:center;
	float:left;
	}
 
.Liv{background-color: #800000;}
 
.Liv a:link {text-decoration: none; color: #fff;}
.Liv a:visited {text-decoration: none;color: #fff;}
.Liv a:hover {text-decoration: none;}
.Liv a:active {text-decoration: none;color: #fff;}
 
</style>
 
</head>
 
<body onLoad="Inizializza()">
 
<div id="Lettere">
<div class="Liv"><a href="#" title="A"><span>A</span></a></div>
<div class="Liv"><a href="#" title="B"><span>B</span></a></div>
<div class="Liv"><a href="#" title="C"><span>C</span></a></div>
<div class="Liv"><a href="#" title="D"><span>D</span></a></div>
<div class="Liv"><a href="#" title="E"><span>E</span></a></div>
<div class="Liv"><a href="#" title="F"><span>F</span></a></div>
<div class="Liv"><a href="#" title="G"><span>G</span></a></div>
</div>
 
</body>
</html>
 


 	float:left;
 
Non capisco poi perché metti gli stili comuni alle due classi mutualmente 
esclusive, quando hai Ls che è univoca per tutti (e se non lo è, 
metticela, come ho fatto io)
 
Bye.