Dynamisk generering af indhold med data
Kombinér dataattributter med jQuery for at skabe interaktive komponenter, opdatere brugergrænsefladen ud fra gemte data og bygge fleksible indholdsvisninger.
Dynamisk generering af indhold med data er en gratis jQuery Academy-lektion på CoddyKit. Dette er lektion 2 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i jQuery Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. jQuery Academy-kurset indeholder 3 lektioner i alt.
Dynamisk indhold med data
Velkommen til lektion 2! I den forrige lektion lærte du, hvordan du gemmer og henter data ved hjælp af HTML5-dataattributter.
Nu går vi et skridt videre. Vi undersøger, hvordan du kan kombinere disse attributter med jQuery for at generere og opdatere indhold dynamisk på dine websider. Det gør dine brugergrænseflader interaktive og fleksible!
Hvorfor dynamisk indhold?
Forestil dig, at du har en liste over produkter, brugerprofiler eller nyhedsartikler. I stedet for at hardkode alt kan du definere grundlæggende data ved hjælp af data-*-attributter.
- Opdatér eksisterende elementer med nye oplysninger.
- Opret helt nye elementer baseret på data.
- Styr brugergrænsefladens adfærd, f.eks. visning og skjul, ved hjælp af data.
Denne tilgang adskiller dine indholdsdata fra deres præsentation.
Opdatering af eksisterende elementer
Lad os begynde med at opdatere indhold. Vi kan have et element med data-*-attributter og bruge jQuery til at læse disse data og udfylde andre dele af siden.
Det er nyttigt til at vise oplysninger om et valgt element eller opdatere statusmeddelelser.
Kode: Opdatér oplysninger om et element
Prøv at klikke på knappen for at se, hvordan dataattributter fra ét element kan opdatere tekst i et andet.
<!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: Opdatering af indhold
I eksemplet indeholder #productCard-div-elementet data-product-name og data-product-price.
- Når der klikkes på knappen, henter
.data('productName')og.data('productPrice')disse værdier. - Derefter bruges
.text()til at indsætte værdierne i#displayedName- og#displayedPrice-span-elementerne.
Det viser, hvordan du kan læse data fra ét element og opdatere indholdet i et andet.
Oprettelse af nye elementer
Ud over at opdatere elementer kan vi også bruge dataattributter til at generere helt nye HTML-elementer. Det er særligt nyttigt til lister, gallerier eller dynamiske formularer.
Du kan gemme skabelonlignende data eller konfiguration til nye elementer i dataattributter og derefter bruge jQuery til at oprette og indsætte dem i DOM'en.
Kode: Føj et element til en liste
Klik på knappen nedenfor for dynamisk at tilføje et nyt listeelement, hvis indhold stammer 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: Oprettelse af elementer
Her har knappen #addBtn data-new-item-text og data-new-item-value.
- Ved et klik henter vi disse værdier.
$('opretter et nyt listeelement.- ')
.text()udfylder det med de kombinerede data.- Til sidst føjer
$('#myList').append(newItem)dette nyetil vores uordnede liste.
Dette er et grundlæggende mønster til opbygning af dynamiske lister eller gitre!
Interaktive komponenter med data
Dataattributter er ikke kun til tekst! De kan også gemme konfiguration til interaktive komponenter. Du kan f.eks. angive, hvilket element der skal skifte tilstand, eller hvilken animation der skal afspilles.
Det afkobler din JavaScript-logik fra hardkodede id'er eller klasser og gør din kode mere modulær og genanvendelig.
Spørgsmål: Dynamisk indhold
Se på følgende HTML- og jQuery-kode:
<div id="infoBox" data-status="active"></div>
$('#infoBox').data('status', 'inactive');
Hvad vil den nye værdi for data-status-attributten være, når den hentes ved hjælp af $('#infoBox').data('status'), efter at denne kode er kørt?
Opsummering: Dynamisk indhold med data
Godt gået! I denne lektion lærte du, hvordan du kan udnytte dataattributter til at skabe virkeligt dynamisk webindhold:
- Du kan opdatere eksisterende elementer ved at læse dataattributter og indsætte deres værdier.
- Du kan generere nye HTML-elementer dynamisk og udfylde dem med data fra andre elementer.
- Denne tilgang gør din brugergrænseflade mere fleksibel og interaktiv ved at adskille data fra præsentation.
Nu er du klar til at opbygge mere tilpasningsdygtige og engagerende brugergrænseflader!
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 22
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Dynamisk generering af indhold med data” gratis?
Ja — alle 3 lektioner i læringssporet jQuery Academy, inklusive “Dynamisk generering af indhold med data”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. jQuery Academy-kurset indeholder 3 lektioner i alt.
Hvad lærer jeg i “Dynamisk generering af indhold med data”?
Kombinér dataattributter med jQuery for at skabe interaktive komponenter, opdatere brugergrænsefladen ud fra gemte data og bygge fleksible indholdsvisninger. Du øver dig i jQuery Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på jQuery Academy?
Der kræves ingen tidligere erfaring. jQuery Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 3.
Hvor lang tid tager lektionen “Dynamisk generering af indhold med data”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne jQuery Academy-lektion?
Ja. Alle jQuery Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Udnyttelse af HTML5-dataattributter
- Dynamisk generering af indhold med data
- Grundlæggende integration af client-side-templating