jQuery Academy · บทเรียน

การสร้างเนื้อหาแบบไดนามิกด้วยข้อมูล

ผสานแอตทริบิวต์ข้อมูลเข้ากับ jQuery เพื่อสร้างองค์ประกอบแบบโต้ตอบ อัปเดตส่วนติดต่อผู้ใช้ตามข้อมูลที่จัดเก็บ และสร้างการแสดงเนื้อหาที่ยืดหยุ่น

การสร้างเนื้อหาแบบไดนามิกด้วยข้อมูล เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน 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>

คำอธิบาย: การอัปเดตเนื้อหา

ในตัวอย่างนี้ div #productCard มี data-product-name และ data-product-price

เมื่อคลิกปุ่ม .data('productName') และ .data('productPrice') จะดึงค่าเหล่านี้ออกมา
จากนั้นใช้ .text() เพื่อใส่ค่าเหล่านี้ลงใน span #displayedName และ #displayedPrice

ตัวอย่างนี้แสดงให้เห็นวิธีอ่านข้อมูลจากองค์ประกอบหนึ่งและอัปเดตเนื้อหาของอีกองค์ประกอบหนึ่ง

การสร้างองค์ประกอบใหม่

นอกจากการอัปเดตแล้ว เรายังสามารถใช้แอตทริบิวต์ข้อมูลเพื่อสร้างองค์ประกอบ 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');

เมื่อเรียกคืนแอตทริบิวต์ data-status โดยใช้ $('#infoBox').data('status') หลังจากโค้ดนี้ทำงานแล้วค่าใหม่จะเป็นอะไร

ทบทวน: เนื้อหาแบบไดนามิกด้วยข้อมูล

ทำได้ดีมาก! ในบทเรียนนี้ คุณได้เรียนรู้วิธีใช้แอตทริบิวต์ข้อมูลเพื่อสร้างเนื้อหาเว็บแบบไดนามิกอย่างแท้จริง:

คุณสามารถอัปเดตองค์ประกอบที่มีอยู่ได้โดยอ่านแอตทริบิวต์ข้อมูลและใส่ค่าของแอตทริบิวต์เหล่านั้นลงไป
คุณสามารถสร้างองค์ประกอบ HTML ใหม่แบบไดนามิก แล้วเติมข้อมูลจากองค์ประกอบอื่นลงไป
แนวทางนี้ทำให้ส่วนติดต่อผู้ใช้ยืดหยุ่นและโต้ตอบได้มากขึ้น โดยแยกข้อมูลออกจากการนำเสนอ

ตอนนี้คุณพร้อมสร้างอินเทอร์เฟซผู้ใช้ที่ปรับเปลี่ยนได้และน่าสนใจยิ่งขึ้นแล้ว!

คำถามที่พบบ่อย

บทเรียน “การสร้างเนื้อหาแบบไดนามิกด้วยข้อมูล” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การสร้างเนื้อหาแบบไดนามิกด้วยข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การสร้างเนื้อหาแบบไดนามิกด้วยข้อมูล”

ผสานแอตทริบิวต์ข้อมูลเข้ากับ jQuery เพื่อสร้างองค์ประกอบแบบโต้ตอบ อัปเดตส่วนติดต่อผู้ใช้ตามข้อมูลที่จัดเก็บ และสร้างการแสดงเนื้อหาที่ยืดหยุ่น คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน

บทเรียน “การสร้างเนื้อหาแบบไดนามิกด้วยข้อมูล” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม

ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ jQuery Academy