0Pricing
jQuery Academy · 课时

使用数据生成动态内容

结合数据属性与 jQuery 创建交互式组件，根据存储的数据更新用户界面，并构建灵活的内容展示。

使用数据生成动态内容 是 CoddyKit 上的免费 jQuery Academy 课时。 这是第 2 节课，共 3 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 jQuery Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 jQuery Academy 课程共包含 3 节课。

使用数据创建动态内容

欢迎来到第 2 课！在上一课中，我们学习了如何使用 HTML5 数据属性存储和读取数据。

现在，我们将更进一步。我们会探索如何将这些属性与 jQuery 结合起来，在网页上动态生成和更新内容。这样可以让您的用户界面更具交互性和灵活性！

为什么需要动态内容

假设您有一个产品列表、用户资料列表或新闻文章列表。您不必将所有内容硬编码，而是可以使用 data-* 属性定义基本数据。

  • 更新现有元素中的信息。
  • 根据数据创建全新的元素。
  • 使用数据控制用户界面行为（例如显示或隐藏）。

这种方式可以将内容数据与其呈现方式分离。

更新现有元素

我们先从更新内容开始。我们可以为元素添加 data-* 属性，然后使用 jQuery 读取这些数据，并填充页面的其他部分。

这对于显示所选项目的详细信息或更新状态消息非常有用。

代码：更新项目详情

请尝试点击按钮，看看一个元素中的数据属性如何更新另一个元素中的文本。

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

说明：更新内容

在这个示例中，#productCard div 包含 data-product-name 和 data-product-price。

  • 点击按钮时，.data('productName') 和 .data('productPrice') 会读取这些值。
  • 然后使用 .text() 将这些值注入 #displayedName 和 #displayedPrice span。

这展示了如何从一个元素读取数据，并更新另一个元素的内容。

创建新元素

除了更新内容之外，我们还可以使用数据属性生成全新的 HTML 元素。这对于列表、图库或动态表单非常强大。

您可以在数据属性中存储类似模板的数据或新元素的配置，然后使用 jQuery 构建这些元素，并将其插入 DOM。

代码：向列表添加项目

点击下方按钮，动态添加一个新的列表项。该列表项的内容来自按钮的数据属性。

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

说明：创建元素

在这里，按钮 #addBtn 具有 data-new-item-text 和 data-new-item-value。

  • 点击时，我们会读取这些值。
  • $('
  • ') 会创建一个新的列表项元素。
  • .text() 会使用组合后的数据填充该元素。
  • 最后，$('#myList').append(newItem) 会将这个新的
  • 添加到无序列表中。

这是构建动态列表或网格的基本模式！

使用数据创建交互式组件

数据属性不只适用于文本！它们还可以存储交互式组件的配置。例如，要切换哪个元素，或播放哪种动画。

这样可以将 JavaScript 逻辑与硬编码的 ID 或类名解耦，使代码更加模块化且易于复用。

问题：动态内容

请考虑以下 HTML 和 jQuery 代码：

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

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

这段代码运行后，使用 $('#infoBox').data('status') 读取时，data-status 属性的新值是什么？

总结：使用数据创建动态内容

做得很好！在本课中，您学习了如何利用数据属性创建真正动态的 Web 内容：

  • 通过读取数据属性并注入其中的值，您可以更新现有元素。
  • 您可以动态生成新的 HTML 元素，并使用其他元素中的数据填充它们。
  • 这种方式将数据与呈现方式分离，使用户界面更加灵活且具有交互性。

现在，您已经可以构建更具适应性和吸引力的用户界面了！

常见问题解答

「使用数据生成动态内容」课时是免费的吗？

是的 — 「使用数据生成动态内容」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 jQuery Academy 课程的其余内容，请升级到 CoddyKit PRO。 jQuery Academy 课程共包含 3 节课。

「使用数据生成动态内容」这节课中我会学到什么？

结合数据属性与 jQuery 创建交互式组件，根据存储的数据更新用户界面，并构建灵活的内容展示。 你通过在浏览器中直接运行的动手代码来练习 jQuery Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 jQuery Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 jQuery Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 3 节。

「使用数据生成动态内容」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 jQuery Academy 课中编写并运行代码吗？

能。每节 jQuery Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. 利用 HTML5 数据属性
  2. 使用数据生成动态内容
  3. 客户端模板集成基础
← 返回 jQuery Academy