إنشاء المحتوى الديناميكي باستخدام البيانات
اجمع بين سمات البيانات وjQuery لإنشاء مكوّنات تفاعلية وتحديث واجهة المستخدم استنادًا إلى البيانات المخزّنة وبناء عروض محتوى مرنة.
إنشاء المحتوى الديناميكي باستخدام البيانات درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 2 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.
المحتوى الديناميكي باستخدام البيانات
مرحبًا بكم في الدرس الثاني! في الدرس السابق، تعلمنا كيفية تخزين البيانات واستردادها باستخدام سمات البيانات في 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 عن المعرّفات أو الأصناف المكتوبة بشكل ثابت، مما يجعل التعليمات البرمجية أكثر نمطية وقابلية لإعادة الاستخدام.
سؤال: المحتوى الديناميكي
تأملوا تعليمات HTML البرمجية وتعليمات jQuery البرمجية الآتية:
<div id="infoBox" data-status="active"></div>
$('#infoBox').data('status', 'inactive');
ما القيمة الجديدة لسمة data-status عند استردادها باستخدام $('#infoBox').data('status') بعد تنفيذ هذه التعليمات البرمجية؟
مراجعة: المحتوى الديناميكي باستخدام البيانات
أحسنتم! تعلمتم في هذا الدرس كيفية الاستفادة من سمات البيانات لإنشاء محتوى ويب ديناميكي بحق:
- يمكنكم تحديث العناصر الموجودة بقراءة سمات البيانات وإدراج قيمها.
- يمكنكم إنشاء عناصر HTML جديدة ديناميكيًا وتعبئتها ببيانات من عناصر أخرى.
- يجعل هذا الأسلوب واجهة المستخدم أكثر مرونة وتفاعلية من خلال فصل البيانات عن طريقة العرض.
أنتم الآن مستعدون لإنشاء واجهات مستخدم أكثر قابلية للتكيف وتشويقًا!
تعلم JavaScript مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 22
- الدروس
- 48
الأسئلة الشائعة
هل درس «إنشاء المحتوى الديناميكي باستخدام البيانات» مجاني؟
نعم — نص درس «إنشاء المحتوى الديناميكي باستخدام البيانات» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.
ماذا ستتعلم في «إنشاء المحتوى الديناميكي باستخدام البيانات»؟
اجمع بين سمات البيانات وjQuery لإنشاء مكوّنات تفاعلية وتحديث واجهة المستخدم استنادًا إلى البيانات المخزّنة وبناء عروض محتوى مرنة. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟
لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 3.
كم من الوقت يستغرق درس «إنشاء المحتوى الديناميكي باستخدام البيانات»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟
نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- الاستفادة من سمات بيانات HTML5
- إنشاء المحتوى الديناميكي باستخدام البيانات
- أساسيات دمج قوالب جهة العميل