0Pricing
jQuery Academy · Lekcja

Dynamiczne generowanie treści na podstawie danych

Proszę łączyć atrybuty data z jQuery, aby tworzyć interaktywne komponenty, aktualizować interfejs na podstawie przechowywanych danych i budować elastyczne widoki treści.

Dynamiczne generowanie treści na podstawie danych to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 2 z 3. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Dynamiczna zawartość z wykorzystaniem danych

Witamy na lekcji 2! Na poprzedniej lekcji nauczyliśmy się przechowywać i pobierać dane za pomocą atrybutów danych HTML5.

Teraz pójdziemy o krok dalej. Dowiemy się, jak połączyć te atrybuty z jQuery, aby dynamicznie generować i aktualizować zawartość na stronach internetowych. Dzięki temu interfejsy użytkownika stają się interaktywne i elastyczne!

Dlaczego dynamiczna zawartość?

Wyobraźmy sobie listę produktów, profile użytkowników lub artykuły wiadomości. Zamiast wpisywać wszystko na stałe, można zdefiniować podstawowe dane za pomocą atrybutów data-*.

  • Aktualizowanie istniejących elementów za pomocą nowych informacji.
  • Tworzenie całkowicie nowych elementów na podstawie danych.
  • Sterowanie zachowaniem interfejsu użytkownika (na przykład wyświetlaniem i ukrywaniem elementów) za pomocą danych.

Takie podejście oddziela dane dotyczące zawartości od sposobu jej prezentacji.

Aktualizowanie istniejących elementów

Zacznijmy od aktualizowania zawartości. Możemy mieć element z atrybutami data-*, a następnie użyć jQuery do odczytania tych danych i wstawienia ich w innych częściach strony.

To świetne rozwiązanie do wyświetlania szczegółów wybranego elementu lub aktualizowania komunikatów o stanie.

Kod: aktualizowanie szczegółów elementu

Proszę kliknąć przycisk, aby zobaczyć, jak atrybuty danych jednego elementu mogą aktualizować tekst w innym elemencie.

<!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>

Wyjaśnienie: aktualizowanie zawartości

W przykładzie element div #productCard przechowuje wartości data-product-name i data-product-price.

  • Po kliknięciu przycisku metody .data('productName') i .data('productPrice') pobierają te wartości.
  • Następnie metoda .text() wstawia te wartości do elementów span #displayedName i #displayedPrice.

Pokazuje to, jak odczytywać dane z jednego elementu i aktualizować zawartość innego.

Tworzenie nowych elementów

Oprócz aktualizowania elementów możemy również używać atrybutów danych do generowania całkowicie nowych elementów HTML. Jest to niezwykle przydatne w przypadku list, galerii i dynamicznych formularzy.

W atrybutach danych można przechowywać dane przypominające szablon lub konfigurację nowych elementów, a następnie użyć jQuery do ich utworzenia i wstawienia do DOM.

Kod: dodawanie elementu do listy

Proszę kliknąć poniższy przycisk, aby dynamicznie dodać nowy element listy, którego zawartość jest pobierana z atrybutów danych przycisku.

<!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>

Wyjaśnienie: tworzenie elementów

W tym przykładzie przycisk #addBtn ma atrybuty data-new-item-text i data-new-item-value.

  • Po kliknięciu pobieramy te wartości.
  • $('
  • ') tworzy nowy element listy.
  • .text() wypełnia go połączonymi danymi.
  • Na koniec $('#myList').append(newItem) dodaje ten nowy element
  • do naszej listy nieuporządkowanej.

To podstawowy wzorzec służący do tworzenia dynamicznych list lub siatek!

Interaktywne komponenty z wykorzystaniem danych

Atrybuty danych nie służą wyłącznie do przechowywania tekstu! Mogą również przechowywać konfigurację interaktywnych komponentów, na przykład wskazywać element, który należy przełączać, lub określać animację do odtworzenia.

Dzięki temu logika JavaScript jest oddzielona od zapisanych na stałe identyfikatorów i klas, a kod staje się bardziej modułowy i wielokrotnego użytku.

Pytanie: dynamiczna zawartość

Proszę rozważyć poniższy kod HTML i jQuery:

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

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

Jaka będzie nowa wartość atrybutu data-status po pobraniu za pomocą $('#infoBox').data('status'), gdy ten kod zostanie wykonany?

Podsumowanie: dynamiczna zawartość z wykorzystaniem danych

Świetnie! Na tej lekcji nauczył się Pan wykorzystywać atrybuty danych do tworzenia naprawdę dynamicznej zawartości stron internetowych:

  • Można aktualizować istniejące elementy, odczytując atrybuty danych i wstawiając ich wartości.
  • Można dynamicznie generować nowe elementy HTML i wypełniać je danymi z innych elementów.
  • Takie podejście zwiększa elastyczność i interaktywność interfejsu użytkownika, oddzielając dane od prezentacji.

Jest Pan teraz gotowy do tworzenia bardziej elastycznych i angażujących interfejsów użytkownika!

Często zadawane pytania

Czy lekcja „Dynamiczne generowanie treści na podstawie danych” jest bezpłatna?

Tak — pełny tekst „Dynamiczne generowanie treści na podstawie danych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 3 lekcji w sumie.

Co nauczysz się w „Dynamiczne generowanie treści na podstawie danych”?

Proszę łączyć atrybuty data z jQuery, aby tworzyć interaktywne komponenty, aktualizować interfejs na podstawie przechowywanych danych i budować elastyczne widoki treści. Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?

Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 3.

Ile czasu zajmuje lekcja „Dynamiczne generowanie treści na podstawie danych”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?

Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Wykorzystanie atrybutów danych HTML5
  2. Dynamiczne generowanie treści na podstawie danych
  3. Podstawy integracji szablonów po stronie klienta
← Powrót do jQuery Academy