Dynamisk innholdsgenerering med data
Kombiner dataattributter med jQuery for å opprette interaktive komponenter, oppdatere brukergrensesnittet basert på lagrede data og bygge fleksible innholdsvisninger.
Dynamisk innholdsgenerering med data er en gratis leksjon i jQuery Academy på CoddyKit. Dette er leksjon 2 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i jQuery Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i jQuery Academy inneholder totalt 3 leksjoner.
Dynamisk innhold med data
Velkommen til leksjon 2! I den forrige leksjonen lærte vi hvordan vi kan lagre og hente data ved hjelp av HTML5-dataattributter.
Nå skal vi ta det et skritt videre. Vi skal utforske hvordan vi kan kombinere disse attributtene med jQuery for å generere og oppdatere innhold dynamisk på nettsidene Deres. Dette gjør brukergrensesnittene interaktive og fleksible!
Hvorfor dynamisk innhold?
Se for Dem at De har en liste over produkter, brukerprofiler eller nyhetsartikler. I stedet for å skrive alt inn direkte kan De definere grunnleggende data ved hjelp av data-*-attributter.
- Oppdatere eksisterende elementer med ny informasjon.
- Opprette helt nye elementer basert på data.
- Styre UI-oppførsel (for eksempel visning/skjuling) ved hjelp av data.
Denne tilnærmingen skiller innholdsdataene fra presentasjonen.
Oppdatere eksisterende elementer
La oss begynne med å oppdatere innhold. Vi kan ha et element med data-*-attributter og bruke jQuery til å lese disse dataene og fylle ut andre deler av siden.
Dette er nyttig for å vise detaljer om et valgt element eller oppdatere statusmeldinger.
Kode: Oppdatere elementdetaljer
Prøv å klikke på knappen for å se hvordan dataattributter fra ett element kan oppdatere teksten i et annet.
<!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>Forklaring: Oppdatere innhold
I eksempelet inneholder #productCard-div-en data-product-name og data-product-price.
- Når knappen klikkes, henter
.data('productName')og.data('productPrice')disse verdiene. - Deretter brukes
.text()til å sette inn verdiene i#displayedName- og#displayedPrice-elementene.
Dette viser hvordan De kan lese data fra ett element og oppdatere innholdet i et annet.
Opprette nye elementer
I tillegg til å oppdatere kan vi også bruke dataattributter til å generere helt nye HTML-elementer. Dette er svært nyttig for lister, gallerier eller dynamiske skjemaer.
De kan lagre maldata eller konfigurasjon for nye elementer i dataattributter og deretter bruke jQuery til å opprette og sette dem inn i DOM-en.
Kode: Legge til element i en liste
Klikk på knappen nedenfor for å legge til et nytt listeelement dynamisk. Innholdet hentes fra knappens dataattributter.
<!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>Forklaring: Opprette elementer
Her har knappen #addBtn attributtene data-new-item-text og data-new-item-value.
- Ved klikk henter vi disse verdiene.
$('oppretter et nytt listeelement.- ')
.text()fyller det med de kombinerte dataene.- Til slutt legger
$('#myList').append(newItem)dette nye-elementet til i den uordnede listen vår.
Dette er et grunnleggende mønster for å bygge dynamiske lister eller rutenett!
Interaktive komponenter med data
Dataattributter brukes ikke bare til tekst! De kan også lagre konfigurasjon for interaktive komponenter, for eksempel hvilket element som skal vises eller skjules, eller hvilken animasjon som skal spilles av.
Dette frikobler JavaScript-logikken fra hardkodede ID-er eller klasser og gjør koden mer modulær og gjenbrukbar.
Spørsmål: Dynamisk innhold
Se på følgende HTML- og jQuery-kode:
<div id="infoBox" data-status="active"></div>
$('#infoBox').data('status', 'inactive');
Hva blir den nye verdien til data-status-attributtet når det hentes med $('#infoBox').data('status') etter at denne koden er kjørt?
Oppsummering: Dynamisk innhold med data
Godt jobbet! I denne leksjonen lærte De hvordan De kan utnytte dataattributter til å opprette virkelig dynamisk webinnhold:
- De kan oppdatere eksisterende elementer ved å lese dataattributter og sette inn verdiene deres.
- De kan generere nye HTML-elementer dynamisk og fylle dem med data fra andre elementer.
- Denne tilnærmingen gjør brukergrensesnittet mer fleksibelt og interaktivt ved å skille data fra presentasjon.
Nå er De klare til å bygge mer tilpasningsdyktige og engasjerende brukergrensesnitt!
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 22
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Dynamisk innholdsgenerering med data» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien jQuery Academy, inkludert «Dynamisk innholdsgenerering med data», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i jQuery Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «Dynamisk innholdsgenerering med data»?
Kombiner dataattributter med jQuery for å opprette interaktive komponenter, oppdatere brukergrensesnittet basert på lagrede data og bygge fleksible innholdsvisninger. Du øver på jQuery Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med jQuery Academy?
Ingen tidligere erfaring er nødvendig. jQuery Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 3.
Hvor lang tid tar leksjonen «Dynamisk innholdsgenerering med data»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne jQuery Academy-leksjonen?
Ja. Alle jQuery Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Utnytte HTML5-dataattributter
- Dynamisk innholdsgenerering med data
- Grunnleggende integrasjon av templating på klientsiden