Non riesco a fare una funzione per creare un avento sui CSS

**angelo_24782** · 22-01-2016, 15:01

Cliccando su uno dei 5 div interni a classe ".parent" venga applicata la classe CSS "selected" solo all'elemento cliccato, togliendolo agli altri div presenti... MI potete aiutare per favore?

io ci ho provato ma non mi esce correttamente come vorrei questo è il mio codice :

<script>

function getValue(id) {

document.getElementById('pippo').classList.remove( 'selected');

document.getElementById(id).classList.add('selecte d');

}

</script>

<style type="text/css">

.selected {
color: white;
background-color: black;
display: inline-block;
padding: 3px;
}

</style>

<div id="pippo" class="parent">

<div id="myHeader1" onClick="getValue('myHeader1')" class="one">one</div>
<div id="myHeader2" onClick="getValue('myHeader2')" class="two">two</div>
<div id="myHeader3" onClick="getValue('myHeader3')" class="three">three</div>
<div id="myHeader4" onClick="getValue('myHeader4')" class="four">four</div>
<div id="myHeader5" onClick="getValue('myHeader5')" class="five selected">five</div>

</div>

**KillerWorm** · 22-01-2016, 17:10

document.getElementById('pippo')

Questo seleziona il div contenitore. Chiaramente non ti basta per beccare l'elemento con classe "selected".

Puoi risolvere in svariati modi. In linea generale puoi aggiungere un ulteriore selettore così da trovare l'elemento desiderato dentro quel contenitore.
Ad esempio puoi usare getElementsByClassName(), una cosa del genere:

codice:

document.getElementById('pippo').getElementsByClassName('selected')[0]

In modo simile puoi usare querySelectorAll() o altri metodi del genere.

Per ottimizzare il tutto io userei inoltre il this per fare riferimento all'elemento cliccato senza bisogno di passarne lo specifico id.
A quel punto, con la proprietà parentNode selezioni il contenitore relativo all'elemento cliccato. Quindi ti basterà usare giusto un ulteriore metodo di selezione per recuperare, dal contenitore, l'elemento precedentemente selezionato (quello con classe "selected").

Inoltre andrebbe aggiunta una condizione per verificare se esista effettivamente un elemento "selected", prima di agire su di esso. Questo previene eventuali errori nell'eventualità di un oggetto inesistente.

Un esempio completo e funzionante:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script type="text/javascript">
      function getValue(me,old) {
        if(old = me.parentNode.querySelectorAll('.selected')[0])
         old.classList.remove('selected');
        me.classList.add('selected');
      }
    </script>
    <style type="text/css">
      .selected {
        color: white;
        background-color: black;
        display: inline-block;
        padding: 3px;
      }
    </style>
  </head>
  <body>
    <div id="pippo" class="parent">
      <div id="myHeader1" onClick="getValue(this)" class="one">one</div>
      <div id="myHeader2" onClick="getValue(this)" class="two">two</div>
      <div id="myHeader3" onClick="getValue(this)" class="three">three</div>
      <div id="myHeader4" onClick="getValue(this)" class="four">four</div>
      <div id="myHeader5" onClick="getValue(this)" class="five selected">five</div>
    </div> 
  </body>
</html>

PS: quando posti del codice sul forum è opportuno usare gli appositi tag di formattazione (vedi regolamento di sezione).

**angelo_24782** · 22-01-2016, 17:29

Grazie di cuore per la tua risposta è stata chiara ed esauriente.
La prossima volta posteroil codice cm da te consigliato.

Comunque grazie davvero sei stato gentilissimo..

**cassano** · 22-01-2016, 21:38

"getValue(this) non manca un parametro qui onClick="getValue(this)" ?

**KillerWorm** · 22-01-2016, 23:34

No. Diciamo che ho usato qualche forzatura.
Ho definito la variabile old come argomento della funzione anziché dichiararla nel modo convenzionale (usando var) all'interno della funzione. Tutto qua.
Sulla chiamata della funzione serve passare giusto il primo argomento.

**cassano** · 23-01-2016, 13:29

e old come viene valorizzata ?

**KillerWorm** · 23-01-2016, 14:34

Viene valorizzata dentro la funzione

Ci sono 3 righe dentro quella funzione.
Ripeto, ho usato qualche forzatura perché tendo sempre a scrivere codice stringato, per cui è chiaro che qualcosa possa non essere così chiaro.
Sulla prima riga eseguo una condizione controllando che l'intera espressione non restituisca un valore indefinito e, allo stesso tempo, assegno quel valore ad old.

Per essere più chiari si può riscrivere lo script, ottenendo lo stesso identico risultato, in questo modo:

codice:

function getValue(me) {
  var old = me.parentNode.querySelectorAll('.selected')[0];
  if(old) old.classList.remove('selected');
  me.classList.add('selected');
}

Così è più carino per tutti.

**cassano** · 24-01-2016, 14:58

Si grazie

Discussione: Non riesco a fare una funzione per creare un avento sui CSS

Strumenti discussione

Ricerca discussione

Visualizza

Non riesco a fare una funzione per creare un avento sui CSS

Tag per questa discussione

Permessi di invio