manipolare oggetti

**buzz80** · 24-01-2010, 11:28

Ciao sembra un problema complicato ma lo è per me che non sono un esperto(scrivete se è chiaro il problema),

ho definito 2 pulsanti in html( sono + di 2 ma per semplificare) e voglio che quando ne schiaccio uno si disattivi l'altro, ossia agire sulla proprietà aria-pressed="false" e mettere aria-pressed="true" al pulsante che schiaccio.

L'html è così:

<div id="b1">
<span id="font_normale" role="button" aria-pressed="true" onclick="handleToggle(this);" onkeydown="if (event.keyCode == 32 || event.keyCode == 13) { handleToggle(this); return false; }">i</span>
<span id="font_aumentato " role="button" aria-pressed="false" aonclick="handleToggle(this);" onkeydown="if (event.keyCode == 32 || event.keyCode == 13) { handleToggle(this); return false; }">B</span>
</div>

quando clicco o schiaccio invio sul pulsante invoco la seguente funzione che ho scritto

function handleToggle( button ) {

var elemento=document.getElementById('b1');

if (button.getAttribute("aria-pressed") == "false") {

//ora io farei una cosa del tipo
var NodoID= elemento.getElementByTagName("span"); e ho la lista di nodi, giusto??

for(var i=0;i<NodoID.length<i++){
ora non so come fare a modificare la proprietà aria-pressed di tutti gli span, del tipo così non funziona NodoID[i].setAttribute("aria-pressed", "false")
help me!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

}//chiusura ciclo for
button.setAttribute("aria-pressed", "true"); //imposto a true quello che ho premuto

}

come posso fare ? grazie

**moaiamorfo** · 24-01-2010, 12:19

ciao, aria-pressed non è un attributo XHTML valido: non hai facoltà, come in XML, di definire attributi arbitrari.

saluti

**buzz80** · 24-01-2010, 13:52

allora al posto di aria-pressed mettiamo che voglio modificare l'attributo class si ogni <span> mettendo quelli ="true" a false e viceversa..
ovviamente non voglio ricorrere a getElementById(' ').setAttribute("class","false")

**cavicchiandrea** · 24-01-2010, 14:07

Le classi non sono true/false, sono attributi css e li richiami con un nome specifico className='Nome-Della-Classe' oppure li vuoti className='' se vuoi cambiare la classe di un gruppo di oggetti/tag specifico potrà essere cosi:
document.getElementsByTagName("qui-metti-il-tag").className='....'

**buzz80** · 24-01-2010, 14:59

ok..ma non è quello il problema principale, vediamo se riesco a spiegarmi;

metti di avere un html così

<div id="pippo">
<span id="a1" class="cl1">ciao</span>
<span id="a2" class="cl2">ciao</span>
<span id="a3" class="cl2">ciao</span>
......................................
<span id="a2o"class="cl2">ciao</span>

</div>

e voglio che attraverso una funzione voglio modificare la classe dell'id chiamante qualunque essa sia in class="clred" e impostare la classe di tutti gli altri id così class="clgrey"

modifica(chiSeiId)
{
}

ora tu cosa faresti? io optavo per recuperare tutti i "nodi" (o come si chiamano) all'interni del div che ha id="pippo" e poi attraverso un ciclo for impostare la classe di questi, infine modificare l'attributo classe dell'id chiamante.

nei messaggi precedenti avevo abbozzato il codice che non funziona, e per questo chiedo aiuto, io arrivo a sapere quanti nodi ci sono se io faccio
var mai=getElementsByTagName("span") ottengo un vettore di span, ma poi come diavolo faccio a cambiare l'ttrivuto class, io facevo mai[0].setAttribute("className")="clred" ma non funge...

**cavicchiandrea** · 24-01-2010, 16:17

Se ho capito cosa vuoi fare:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Cambio classe</title>
<style type="text/css">
<!--
#menu {
	border: 1px dotted #CCCCCC;
	width: 200px;
	margin-right: auto;
	margin-left: auto;
}
#span-0 {
	display: block;
	height: 20px;
	width: 180px;
	margin-top: 3px;
	margin-right: auto;
	margin-left: auto;
}
#span-1 {
	display: block;
	height: 20px;
	width: 180px;
	margin-top: 3px;
	margin-right: auto;
	margin-left: auto;
}
#span-2 {
	display: block;
	height: 20px;
	width: 180px;
	margin-top: 3px;
	margin-right: auto;
	margin-left: auto;
}
.span-attivo{
	background-color: #666666;
}
.span{background-color: #CCCCCC;
cursor:pointer;
}
-->
</style>
<script type="text/javascript">
<!--
function cambiaclasse(id,classeon,classeoff){
var span = document.getElementsByTagName('span')
for(var i=0; i<span.length; i++){
if(id!=span[i].id)span[i].className=classeoff
else span[i].className=classeon
}
}
//-->
</script>
</head>

<body>
<div id="menu"><span id="span-0" onclick="cambiaclasse(this.id,'span-attivo','span')" class="span">span 0</span><span id="span-1" class="span" onclick="cambiaclasse(this.id,'span-attivo','span')">span 1</span><span id="span-2" class="span" onclick="cambiaclasse(this.id,'span-attivo','span')">span 2</span></div>
</body>
</html>

P.S. Forse la stessa cosa si può fare anche con le pseudo classi in css, ma non sono sicuro.

Discussione: manipolare oggetti

Strumenti discussione

Ricerca discussione

Visualizza

manipolare oggetti

Permessi di invio