Come far usare la stessa funzione a più elementi

di
Nicola Diomajuta
il
12 risposte
N
Nicola Diomajuta
Pochi posts
Iscritto da
ago, 2022
Messaggi:
6

Come far usare la stessa funzione a più elementi

Ciao stavo programmando il mio sito e per evitare di dover scrivere per ogni elemento la stessa funzione mi sono chiesto se ci fosse un modo con il quale io mi creo una variabile javascript con il query selector all di una classe poi quando crea una funzione metto variabiledellaclasse.onclick e dentro la funzione mi richiamo l'elemento della classe che ho cliccato senza dover creare per ogni elemento una funzione.
var variabile = querySelectoAll(".class");
variabile.onclick = function (){
elementodellaclassecliccato.setattribute...

12 Risposte

  • M
    migliorabile
    Super Famoso
    Iscritto da
    apr, 2013
    Messaggi:
    6045

    Re: Come far usare la stessa funzione a più elementi

    Sorry, non si e' capito niente.

    Tu vorresti eseguire la stessa funzione su una lista di oggetti?
  • ninja72
    ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi:
    79

    Re: Come far usare la stessa funzione a più elementi

    Se ho capito bene, ti basta iterare gli elementi catturati da querySelectorAll la quale genera una NodeList la quale ha
    un suo metodo foreach, come gli array.
    
 const myClass = document.querySelectorAll('.class')

        myClass.forEach(e => { // NodeList ha un suo metodo (forech come gli array) per iterate gli elementi. 
            e.onclick = function (e) {
                const { target } = e
                target.className === 'class'
                    ? target.setAttribute('class', 'press')
                    : target.setAttribute('class', 'class')
            }
        })
  • N
    Nicola Diomajuta
    Pochi posts
    Iscritto da
    ago, 2022
    Messaggi:
    6

    Re: Come far usare la stessa funzione a più elementi

    Scusami potresti spiegarmi che cosa sarebbero le due linee che iniziano con il ? e con :.
    altra domanda nella riga: target.className === 'class'
    che operazione svolge?
    grazie
  • ninja72
    ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi:
    79

    Re: Come far usare la stessa funzione a più elementi

    Questo blocco di codice rappresenta il ternario che è l'equivalente di un if...else.
    il click su ogni elemento verifica se l'elemento possiede la class con nome "class" se si gli assegna un'altra classe di nome "press", fa la stessa cosa per ogni elemento iterato.
    
target.className === 'class'
                    ? target.setAttribute('class', 'press')
                    : target.setAttribute('class', 'class')
    tradotto in if...else 
    
if (target.className === 'class') {	
	target.setAttribute('class', 'press')
        }else {
        target.setAttribute('class', 'class')
}
    documentazione operatore ternario.
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
  • N
    Nicola Diomajuta
    Pochi posts
    Iscritto da
    ago, 2022
    Messaggi:
    6

    Re: Come far usare la stessa funzione a più elementi

    Grazie mille però adesso ho provato a far andare il programma come penso che dovrebbe andare ma non va
    potresi vedere cosa sbaglio in questo codice
    io vorrei che al click di uno dei div con class incarico gli si cambia il colore senza dover fare una funzione onclick per ogni div 
    
// La class incarico è quella che ho attribuito a più div che dovrebbero svolgere la funzione
// la class ColBlu da il colore blu al div
// la class ColVer da il colore verde alla classe

const Incarico = document.querySelectorAll('Incarico')

        Incarico.forEach(e => { // NodeList ha un suo metodo (forech come gli array) per iterate gli elementi. 
            e.onclick = function (e) {
                const { target } = e
                target.className === 'ColBlu'
                    ? target.setAttribute('class', 'ColVer')
                    : target.setAttribute('class', 'ColBlu')
            }
        })
  • ninja72
    ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi:
    79

    Re: Come far usare la stessa funzione a più elementi

    Potrei vedere la struttura dell'html con relativo stile ?
  • N
    Nicola Diomajuta
    Pochi posts
    Iscritto da
    ago, 2022
    Messaggi:
    6

    Re: Come far usare la stessa funzione a più elementi

    
html
<div class="Incarico ColBlu"></div>
<div class="Incarico ColBlu"></div>
<div class="Incarico ColBlu"></div>
<div class="Incarico ColBlu"></div>
<div class="Incarico ColBlu"></div>
<div class="Incarico ColBlu"></div>
html
// La class incarico è quella che ho attribuito a più div che dovrebbero svolgere la funzione
// la class ColBlu da il colore blu al div
// la class ColVer da il colore verde alla classe

const Incarico = document.querySelectorAll('Incarico')

        Incarico.forEach(e => { // NodeList ha un suo metodo (forech come gli array) per iterate gli elementi. 
            e.onclick = function (e) {
                const { target } = e
                target.className === 'ColBlu'
                    ? target.setAttribute('class', 'ColVer')
                    : target.setAttribute('class', 'ColBlu')
            }
        })
  • ninja72
    ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi:
    79

    Re: Come far usare la stessa funzione a più elementi

    Ok, ho riletto meglio, una la soluzione potrebbe essere questa :
    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ColVer {
            color: green;
        }

        .ColBlu {
            color: blue;
        }
    </style>
</head>

<body>

    <div class="Incarico ColBlu">1</div>
    <div class="Incarico ColBlu">2</div>
    <div class="Incarico ColBlu">3</div>

    <script>
        const incarico = document.querySelectorAll('.Incarico')
        let selectClass = null

        incarico.forEach(e => {
            e.onclick = function (e) {
                const { target } = e
                selectClass = target.className.replace('Incarico', '').trim()
                console.log(selectClass)
                selectClass === 'ColBlu'
                    ? target.setAttribute('class', 'ColVer')
                    : target.setAttribute('class', 'ColBlu')
            }
        })
    </script>
</body>

</html>
  • N
    Nicola Diomajuta
    Pochi posts
    Iscritto da
    ago, 2022
    Messaggi:
    6

    Re: Come far usare la stessa funzione a più elementi

    Siccome vorrei un po capire potresti spiegarmi il foreach e poi quello che hai scritto dentro grazie mille
  • ninja72
    ninja72
    Utente Attivo
    Iscritto da
    mag, 2020
    Messaggi:
    79

    Re: Come far usare la stessa funzione a più elementi

    La querySelectorAll crea una nodelist di elementi definiti, dunque la variabile "incarico" conterrà la nodelist degli elementi, questi potranno essere iterati/ciclati con il foreach cha eseguira la callback su tutti gli elementi.
    Per callback si intende la funzione che si passa al foreach, in pratica è una funzione da passare ad un'altra funzione o metodo se facciamo riferimento ad un'oggetto.

    https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach

    Per quanto riguarda target.className, restituisce una stringa con tutti i nomi delle classi utilizzati in ogni elemento,
    visto che noi dobbiamo fare un confronto di uguaglianza :
    
 selectClass === 'ColBlu'
    senza la presenza della classe "Incarico" (riferito allo stile), andiamo a sostituirla con una stringa vuota utilizzando
    replace() mentre il trim() elimina eventuali spazi iniziali e finali dalla stringa.
    
selectClass = target.className.replace('Incarico', '').trim()
  • N
    Nicola Diomajuta
    Pochi posts
    Iscritto da
    ago, 2022
    Messaggi:
    6

    Re: Come far usare la stessa funzione a più elementi

    Ciao scusa se ti disturbo ancora però non mi viene quindi adesso voglio cercarti di spiegare meglio quello che devo fare per farti capire bene.
    essenzialmente io volevo creare un calendario settimanale dove per ogni giorno ci sono dei blocchi che fungono da ore e poi altri blocchi dove ci sono le attività che dovrei svolgere e quindi quando io clicco su un attività devo cliccare anche su quale orario della settimana la voglio fare, potrei farlo con molte funzioni anonime ma penso che sarebbe davvero lungo. ah altra cosa quando clicco su un attività e con il mouse mi muovo sui blocchi delle ore i blocchi devono cambiare colore per far vedere come un anteprima di dove andrebbe messa quell'attività. se riusciresti a farmi questo e dopo anche spiegarmelo te ne sarei enormemente grato.
  • Alka
    Alka
    Utente Famoso
    Iscritto da
    nov, 2014
    Messaggi:
    3312

    Re: Come far usare la stessa funzione a più elementi

    Nicola Diomajuta ha scritto:

    se riusciresti a farmi questo e dopo anche spiegarmelo te ne sarei enormemente grato.
    Lo scopo del forum è aiutare le persone a risolvere problemi nella scrittura del codice, non nel fare il lavoro al posto loro e spiegare pure come hanno fatto: si chiama "pappa pronta" e non è ben accetta (vedi anche il Regolamento).

    Prova a cimentarti tu nella realizzazione di quanto chiedi, dopo aver appreso i rudimenti del linguaggio e aver studiato un po' di documentazione, e in caso di difficoltà posta il codice e spiega cosa non va o non funziona come dovrebbe, e saremo ben lieti di dare una mano, sottolineando dare una mano, non tutto il braccio e anche parte integrante del corpo.

    Ciao!
Devi accedere o registrarti per scrivere nel forum
12 risposte