0Pricing
jQuery Academy · Lezione

Generazione dinamica dei contenuti con i dati

Combinare gli attributi data con jQuery per creare componenti interattivi, aggiornare l'interfaccia in base ai dati memorizzati e realizzare visualizzazioni flessibili dei contenuti.

Generazione dinamica dei contenuti con i dati è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.

Contenuti dinamici con i dati

Benvenuto alla lezione 2! Nella lezione precedente abbiamo imparato a memorizzare e recuperare dati usando gli attributi data di HTML5.

Ora faremo un passo in più. Vedremo come combinare questi attributi con jQuery per generare e aggiornare dinamicamente i contenuti delle pagine web. In questo modo le interfacce utente diventano interattive e flessibili!

Perché usare contenuti dinamici?

Immagini di avere un elenco di prodotti, profili utente o articoli di notizie. Invece di inserire tutto staticamente nel codice, può definire i dati di base usando gli attributi data-*.

  • Aggiornare gli elementi esistenti con nuove informazioni.
  • Creare elementi completamente nuovi in base ai dati.
  • Controllare il comportamento dell'interfaccia utente (ad esempio mostrando o nascondendo elementi) usando i dati.

Questo approccio separa i dati dei contenuti dalla loro presentazione.

Aggiornamento degli elementi esistenti

Iniziamo aggiornando i contenuti. Possiamo avere un elemento con attributi data-* e usare jQuery per leggere quei dati e riempire altre parti della pagina.

È particolarmente utile per visualizzare i dettagli di un elemento selezionato o aggiornare i messaggi di stato.

Codice: aggiornamento dei dettagli di un elemento

Provi a fare clic sul pulsante per vedere come gli attributi data di un elemento possono aggiornare il testo di un altro elemento.

<!DOCTYPE html>
<html>
<head>
  <title>Update Content</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<div id="productCard" data-product-name="CoddyKit Pro" data-product-price="29.99">
  <p>Product: <span id="displayedName">[Name Here]</span></p>
  <p>Price: <span id="displayedPrice">[Price Here]</span></p>
  <button id="showDetailsBtn">Show Details</button>
</div>

<script>
$(document).ready(function() {
  $('#showDetailsBtn').on('click', function() {
    var name = $('#productCard').data('productName');
    var price = $('#productCard').data('productPrice');
    
    $('#displayedName').text(name);
    $('#displayedPrice').text('$' + price);
  });
});
</script>

</body>
</html>

Spiegazione: aggiornamento dei contenuti

Nell'esempio, il div #productCard contiene data-product-name e data-product-price.

  • Quando si fa clic sul pulsante, .data('productName') e .data('productPrice') recuperano questi valori.
  • Viene quindi usato .text() per inserire questi valori negli span #displayedName e #displayedPrice.

Questo mostra come leggere i dati da un elemento e aggiornare il contenuto di un altro.

Creazione di nuovi elementi

Oltre ad aggiornare i contenuti, possiamo anche usare gli attributi data per generare elementi HTML completamente nuovi. È estremamente utile per elenchi, gallerie o moduli dinamici.

Può memorizzare negli attributi data dati simili a un modello o la configurazione per nuovi elementi, quindi usare jQuery per crearli e inserirli nel DOM.

Codice: aggiunta di un elemento a un elenco

Faccia clic sul pulsante qui sotto per aggiungere dinamicamente un nuovo elemento all'elenco, il cui contenuto deriva dagli attributi data del pulsante.

<!DOCTYPE html>
<html>
<head>
  <title>Create New Element</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>

<ul id="myList">
  <li>Existing Item 1</li>
</ul>

<button id="addBtn" data-new-item-text="Dynamic Item" data-new-item-value="101">
  Add Dynamic Item
</button>

<script>
$(document).ready(function() {
  $('#addBtn').on('click', function() {
    var itemText = $(this).data('newItemText');
    var itemValue = $(this).data('newItemValue');
    
    var newItem = $('<li>').text(itemText + ' (ID: ' + itemValue + ')');
    $('#myList').append(newItem);
  });
});
</script>

</body>
</html>

Spiegazione: creazione degli elementi

In questo caso, il pulsante #addBtn ha gli attributi data-new-item-text e data-new-item-value.

  • Al clic recuperiamo questi valori.
  • $('
  • ') crea un nuovo elemento dell'elenco.
  • .text() lo riempie con i dati combinati.
  • Infine, $('#myList').append(newItem) aggiunge questo nuovo elemento
  • al nostro elenco non ordinato.

Si tratta di uno schema fondamentale per creare elenchi o griglie dinamici!

Componenti interattivi con i dati

Gli attributi data non servono solo per il testo! Possono anche memorizzare la configurazione dei componenti interattivi: ad esempio, quale elemento attivare o quale animazione riprodurre.

In questo modo la logica JavaScript non dipende da ID o classi inseriti staticamente nel codice, rendendo il codice più modulare e riutilizzabile.

Domanda: contenuti dinamici

Consideri il seguente codice HTML e jQuery:

<div id="infoBox" data-status="active"></div>

$('#infoBox').data('status', 'inactive');

Quale sarà il nuovo valore dell'attributo data-status quando verrà recuperato usando $('#infoBox').data('status') dopo l'esecuzione di questo codice?

Riepilogo: contenuti dinamici con i dati

Ottimo lavoro! In questa lezione ha imparato a sfruttare gli attributi data per creare contenuti web davvero dinamici:

  • Può aggiornare gli elementi esistenti leggendo gli attributi data e inserendone i valori.
  • Può generare dinamicamente nuovi elementi HTML, riempiendoli con i dati di altri elementi.
  • Questo approccio rende l'interfaccia utente più flessibile e interattiva, separando i dati dalla presentazione.

Ora è pronto per creare interfacce utente più adattabili e coinvolgenti!

Domande Frequenti

La lezione «Generazione dinamica dei contenuti con i dati» è gratuita?

Sì — il testo completo di «Generazione dinamica dei contenuti con i dati» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.

Cosa imparerò in «Generazione dinamica dei contenuti con i dati»?

Combinare gli attributi data con jQuery per creare componenti interattivi, aggiornare l'interfaccia in base ai dati memorizzati e realizzare visualizzazioni flessibili dei contenuti. Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare jQuery Academy?

Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 3.

Quanto tempo richiede la lezione «Generazione dinamica dei contenuti con i dati»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione jQuery Academy?

Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Utilizzo degli attributi data di HTML5
  2. Generazione dinamica dei contenuti con i dati
  3. Integrazione di base dei template lato client
← Torna a jQuery Academy