تحقيق التفاعل بين عناصر صفحتك باستخدام JavaScript
في هذا السياق، يبدو أنك ترغب في تحقيق وظيفة تفاعلية باستخدام PHP وHTML، حيث يمكن للمستخدم اختيار عنصر من قائمة ونقله إلى عنصر آخر. سأقدم لك إرشادات حول كيفية تحقيق هذا الهدف.
أولاً وقبل كل شيء، يبدو أنك قمت بجلب قائمة المستخدمين من قاعدة البيانات باستخدام PHP وعرضها في العنصر #usersOnLine
على صفحتك. الخطوة التالية هي إضافة السمة التفاعلية للقائمة.
لتحقيق هذا، يمكنك استخدام JavaScript للتفاعل مع النقرات على العناصر. قم بتعديل ملف HTML الخاص بك ليشمل الكود التالي:
html<script>
document.addEventListener("DOMContentLoaded", function () {
var usersOnLine = document.getElementById('usersOnLine');
var reciverDiv = document.getElementById('reciver');
usersOnLine.addEventListener('click', function (event) {
// تأكد من النقر على عنصر div وليس نصًا داخله
if (event.target.tagName.toLowerCase() === 'div') {
// نقل قيمة العنصر إلى div الاستقبال
reciverDiv.innerHTML = 'reciver
' + event.target.innerHTML;
}
});
});
script>
هذا الكود يستخدم JavaScript لربط الأحداث، حيث يتم استدعاء الدالة عندما يتم تحميل الصفحة. ثم يتم تحديد العنصر usersOnLine
و reciverDiv
باستخدام getElementById
. يتم إضافة مستمع حدث يتفاعل عند النقر على usersOnLine
. يتم التحقق أولاً من أن العنصر المستهدف هو div
، ثم يتم نقل محتواه إلى reciverDiv
.
يمكنك إضافة هذا الكود إلى نهاية صفحتك الحالية، وستجد أن الآن يمكنك نقل الأسماء من usersOnLine
إلى reciverDiv
بمجرد النقر عليها.
المزيد من المعلومات
بالطبع، دعنا نوسع قليلاً على الشرح. في الكود السابق، استخدمنا JavaScript لتحقيق التفاعلية بين عناصر الصفحة. دعنا نلقي نظرة أعمق على بعض الجوانب المهمة:
-
المستمع للأحداث:
في البداية، استخدمناdocument.addEventListener("DOMContentLoaded", function () {...}
للتأكد من أن الصفحة قد تم تحميلها بالكامل قبل تنفيذ أي كود JavaScript. هذا يضمن أن العناصر التي نحاول الوصول إليها قد تم إنشاؤها بالفعل. -
استخدام
getElementById
:
قمنا باستخدامdocument.getElementById
للوصول إلى العناصر على الصفحة. في سياق HTML الخاص بك، لديكusersOnLine
وreciver
كـ IDs للعناصر التي نريد التفاعل معها. -
تحديد العناصر المستهدفة:
استخدمناevent.target
للوصول إلى العنصر الذي تم النقر عليه. في حالتنا، نحن نهتم بالعناصرdiv
داخلusersOnLine
. -
تحديث
reciverDiv
:
قمنا بتحديث محتوىreciverDiv
باستخدامreciverDiv.innerHTML
ليحتوي على العنصر الذي تم النقر عليه داخلusersOnLine
. -
التحقق من العنصر المستهدف:
استخدمناevent.target.tagName.toLowerCase() === 'div'
للتحقق من أن العنصر المستهدف هوdiv
. هذا يساعد في تجنب استجابة غير مرغوبة للنقرات على نصوص داخل العناصر.
مع هذه التوسيعات، يمكنك تكوين فهم أعمق لكيف يعمل الكود وكيف يتفاعل JavaScript مع عناصر HTML لتحقيق التفاعلية التي ترغب فيها.