|
|
|
|
Strumenti |
26-03-2017, 12:55 | #1 |
Member
Iscritto dal: Apr 2013
Messaggi: 130
|
[javascript] azione al cambiare del contentuo di un div
Salve a tutti,
Sto creando un palinsesto di una radio in HTML e CSS; in pratica si tratta di una serie di div incolonnati che all'interno hanno il nome del programma radiofonico, o rubrica legato a un determinato orario che si torva nella prima colonna a sinistra. Ognuno di questi div ha un suo contenuto testuale standard: es. Musica, latino americano, Musica anni 80, ecc. Vorrei se fosse possibile dei suggerimenti su come creare una funzione javascript che mi cambi il colore dello sfondo del div ogni volta che cambio il testo contenuto all'interno. Ho creato un inizio di funzione: Codice:
function cambiaSfondo(el) { if (el.innerHTML=="Musica") { el.style.backgroundColor="pink" } } Ovviamente la funzione cambia sfondo dovrebbe avere tanti if quanti sono i testi (a cui sono legati specifici colori) Ultima modifica di alninek : 26-03-2017 alle 13:05. |
26-03-2017, 19:07 | #2 | |
Member
Iscritto dal: Apr 2013
Messaggi: 130
|
Quote:
mmmhhh... potresti spiegare per favore? non sono molto esperto... qualcosa step by step sarebbe molto gradita :-) Ultima modifica di alninek : 26-03-2017 alle 19:47. |
|
27-03-2017, 16:50 | #3 | |
Member
Iscritto dal: Apr 2013
Messaggi: 130
|
Quote:
...mi sa però che devo studiarne ancora di javascript! :-) Ho solo una infarinatura super generale studiata all'università... non capisco quasi nulla dell'esemepio. Ma sei stato getnilissimo. Grazie ancora! :-) |
|
27-03-2017, 17:13 | #4 |
Senior Member
Iscritto dal: May 2007
Messaggi: 4226
|
Infatti lui non ha utilizzato javascript puro ma il Framework jquery
potresti fare anche una cosa simile: https://jsfiddle.net/sixdas/df93gv79/
__________________
Feedback Mercatino Processore: Intel i7-10700; Scheda Madre: MSI MAG Z490 TOMAHAWK; Scheda Video: Sapphire RADEON RX 580 NITRO+ 8GB; RAM: Kingston FURY 32Gb (2 x 16 Gb), 3200 MHz CL16; SSD: Samsung 970 EVO Plus SSD 250 GB, NVMe M.2; SSD 2: Western Digital SSD 512GB, NVMe M.2; Monitor:LG 27GL650F; Ultima modifica di espanico : 27-03-2017 alle 18:08. |
27-03-2017, 18:26 | #5 | |
Member
Iscritto dal: Apr 2013
Messaggi: 130
|
Quote:
Grazie anche a te della risposta :-) Fammi capire: HTML assegno alla textarea la classe box (nel mio caso al div) JAVASCRIPT assegna la classe "change" CSS alla textarea che ha classe "box" quando? CSS creo una classe change che dovrò assegnare a? ...per ovviamente cambiare i lcolore del background a piacere P.S. chiedo scusa ma purtroppo capisco qualcosa di HTML e di CSS ma poco di javascript Ultima modifica di alninek : 27-03-2017 alle 18:37. |
|
27-03-2017, 20:05 | #6 |
Senior Member
Iscritto dal: May 2007
Messaggi: 4226
|
Funziona molto semplicemente, quando il testo cambia, nella textarea con la classe box viene assegnata la classe css change, che in questo caso cambia lo sfondo in verde.
Secondo me le strade sono diverse, bisogna capire cosa vuoi realizzare nello specifico. Tu hai detto che ci sono dei div affiancati, ma non hai scritto se questi sono statici oppure aggiornatati dinamicamente. Il cambiamento del testo come avviene?
__________________
Feedback Mercatino Processore: Intel i7-10700; Scheda Madre: MSI MAG Z490 TOMAHAWK; Scheda Video: Sapphire RADEON RX 580 NITRO+ 8GB; RAM: Kingston FURY 32Gb (2 x 16 Gb), 3200 MHz CL16; SSD: Samsung 970 EVO Plus SSD 250 GB, NVMe M.2; SSD 2: Western Digital SSD 512GB, NVMe M.2; Monitor:LG 27GL650F; |
29-03-2017, 14:58 | #7 | |
Member
Iscritto dal: Apr 2013
Messaggi: 130
|
Quote:
Ho capito. Credo di essermi spiegato male, chiedo scusa. Immagina una colonna dove ci sono gli orari, divisi in intervalli di un'ora, (07.00-08.00 - 08.00-09.00, ecc.), una riga per i giorni della settimana (Lunedi, Martedi, ecc.). Gli incroci sono i div. All'interno di ogni div c'è un testo che identifica il nome di un programma radiofonico. Quindi + o - i div sono una settantina circa. Mi serve che la funzione javascript analizzi il contenuto testuale di ogni singolo div assegnando un colore allo sfondo ogni volta che, nel codice HTML, viene cambiato a mano il testo, dopo che ovviamente ho assegnato a certi testi definiti (il nome del programma) un colore di sfondo. Se ci sono 20 programmi diversi, con 20 nomi distinti dovrei fare 20 confronti per ognuno dei div presenti nella "tabella", quindi credo che mi serva una iterazione... o sbaglio? chiedo ancora scusa e spero di esermi spiegato meglio. Grazie della pazienza :-) Ultima modifica di alninek : 29-03-2017 alle 15:27. |
|
30-03-2017, 08:45 | #8 |
Senior Member
Iscritto dal: Nov 2005
Messaggi: 2744
|
Mi sembra di capire che per modificare il testo dei div apri il documento con un editor e lo modifichi. Se è così hai ragione serve solo un loop. Hai diverse opzioni ma la soluzione migliore dipende dalla struttura html esistente. Probabilmente la più semplice è aggiungere una classe css comune a tutti i div che possono contenere il testo da analizzare e poi prenderli tutti con
var tuttiIDivDaAnalizzare = document.getElementsByClassName('laClasseCheHaiAggiunto') https://developer.mozilla.org/it/doc...ntsByClassName Vedi il link per un esempio. A quel punto fai un ciclo sugli elementi e chiami la funzione che hai postato nel primo post a cui vai ad aggiungere tutti i casi mancanti Inviato dal mio F5121 utilizzando Tapatalk |
01-04-2017, 14:44 | #9 | |
Member
Iscritto dal: Apr 2013
Messaggi: 130
|
Quote:
In effetti ho dato a ciascun div degli id mnemonici in pratica il giorno della settimana con 4 numeri accanto che identificano l'orario di trasmissione Lunedi0910 Lunedi1011 ... Martedi1213 ... Mercoledi1718 ecc. però in effetti facendo una classe li posso inserire tutti li dentro e via. Ora, assegnando una classe a tutti sti div dovrei sostituire "el" nella funzione che ho creato nel primo post con la variabile che tu hai suggerito? Codice:
if (tuttiIDivDaAnalizzare.innerHTML == "Latino americano") { tuttiIDivDaAnalizzare.style.backgroundColor = "#FFE118" } Codice:
var tuttiIDivDaAnalizzare = newArray(); tuttiIDivDaAnalizzare[0]= "Musica anni 80"; tuttiIDivDaAnalizzare[1] = "New Age"; tuttiIDivDaAnalizzare[2] = "Latino americano"; ... Per quanto riguarda la iterazione quello è al di fuori delle mie capacità; purtroppo all'università Javascript lo abbiamo trattato solo marginalmente, se potessi spiegarmi sarebbe fantastico, se no magari un link dove posso capire come funziona di base sarebbe graditissimo. Grazie della pazienza :-) Ultima modifica di alninek : 01-04-2017 alle 16:12. |
|
03-04-2017, 11:11 | #10 |
Senior Member
Iscritto dal: Nov 2005
Messaggi: 2744
|
|
03-04-2017, 12:38 | #11 | |
Member
Iscritto dal: Apr 2013
Messaggi: 130
|
Quote:
adesso lo guardo con attenzione! |
|
03-04-2017, 19:12 | #12 | |
Member
Iscritto dal: Apr 2013
Messaggi: 130
|
Quote:
Il codice non funziona perchè mi sa che ho sbagliato io nel non specificare: e si palesa tutta la mia inesperienza... Il contenuto del div non è un testo e basta ma degli elenchi: Codice:
<div id="Lunedi090915" class="cambiaColore"> <ul> <li>Musica</li> </ul> </div> Tra l'altro avendo l'esigenza alcune volte di inserire all'interno di un unico div delle righe di testo separate come: Codice:
<div id="Lunedi090915" class="cambiaColore"> <ul> <li>Musica</li> <li>Oroscopo</li> <li>Meteo</li> </ul> </div> Che dici? meglio che mi do all'ippica? Ultima modifica di alninek : 03-04-2017 alle 19:14. |
|
03-04-2017, 19:50 | #13 |
Senior Member
Iscritto dal: May 2007
Messaggi: 4226
|
Sostituisci:
Codice:
if (el.innerHTML=="Musica") Codice:
if (el.innerHTML.indexOf("Musica") != -1)
__________________
Feedback Mercatino Processore: Intel i7-10700; Scheda Madre: MSI MAG Z490 TOMAHAWK; Scheda Video: Sapphire RADEON RX 580 NITRO+ 8GB; RAM: Kingston FURY 32Gb (2 x 16 Gb), 3200 MHz CL16; SSD: Samsung 970 EVO Plus SSD 250 GB, NVMe M.2; SSD 2: Western Digital SSD 512GB, NVMe M.2; Monitor:LG 27GL650F; |
03-04-2017, 20:26 | #14 | |
Member
Iscritto dal: Apr 2013
Messaggi: 130
|
Quote:
Ho provato a fare come hai suggerito, ma non va... nel senso che se refresho con F5 la situazioone è immutata. P.S. scusami, siccome a sto punto sto facendo il pappagallo che copia, potrebbe anche darsi che chiedo una cosa ovvia e me ne scuso: cosa intendi per "se la trova aggiunge la classe"? la classe "cambioColore" che wingman87 nel suo esempio ha nominato "hour" l'ho già assegnata manualmente nel codice HTML ai singoli div che contengono le liste: Codice:
<div id="Lunedi090915" class="cambiaColore"> <ul> <li>Musica</li> </ul> </div> |
|
04-04-2017, 17:01 | #15 |
Member
Iscritto dal: Apr 2013
Messaggi: 130
|
Sono riuscito a risolvere.
A breve inserisco il codice che ho usato Un ringraziamento a tutti per la pazienza e le spiegazioni |
05-04-2017, 17:48 | #16 |
Member
Iscritto dal: Apr 2013
Messaggi: 130
|
Ecco come ho risolto:
Nell'HTML dopo aver nominato i singoli div con degli id, ho assegnato loro una classe "cambioColore" nell'head ho inserito la funziona Javascript cambiaSfondo(el) Codice:
function cambiaSfondo(el) { if (el.innerHTML.indexOf("80") != -1) { return el.style.backgroundColor = "pink"; } else if (el.innerHTML.indexOf("90") != -1) { return el.style.backgroundColor="green" } il return mi è servito perchè ho previsto nel CSS una proprietà :hover per i vari div con la funzione di cambiamento dello sfondo; essendo questa anche il compito della funzione cambiaSfondo() dovevo pensare a qualcosa che mi cambiasse lo sfondo al passaggio del mouse ma non appena il mouse usciva dall'area interessata mi ripresentasse lo sfondo come cambiato dalla funzione; ergo in calce all'HTML e più precisamente prima del </body> ho inserito grazie all'aiuto di un prof. all'università una funzione cambiatuttiSfondi(): Codice:
function CambiaTuttiSfondi() { var elements = document.getElementsByClassName('cambiaColore'); for (i = 0; i < elements.length; i++) { cambiaSfondo(elements[i]); elements[i].addEventListener("mouseover", function () { this.style.backgroundColor = "#grey" }); elements[i].addEventListener("mouseout", function () { this.style.backgroundColor = cambiaSfondo(this); }); } } Grazie ancora a tutti dell'aiuto e della pazienza. :-) |
Strumenti | |
|
|
Tutti gli orari sono GMT +1. Ora sono le: 12:33.