عرض وإخفاء عناصر div بناءً على الزمن

لتحقيق هدفك، يمكنك استخدام دالة تابعة (callback) لعملية إظهار وإخفاء العناصر بشكل تتابعي بناءً على الزمن المحدد. يمكنك استخدام setTimeout() لتنظيم فترة ظهور كل عنصر وثم إخفائه بعد انتهاء الفترة.

في البداية، يمكنك جعل جميع عناصر div غير مرئية باستخدام CSS، ثم استخدم JavaScript لإظهار العناصر بشكل تتابعي وفقًا للزمن المحدد.

فيما يلي كيفية تنفيذ ذلك بالتفصيل:

javascriptCopy code
// قم بتعيين متغير لتخزين فهرس العنصر الحالي
var currentIndex = 0;

// اختر العناصر div المباشرة كأطفال لعنصر body وقم بإخفاء كل منها
$("body > div").hide();

// عرّف دالة لإظهار العنصر الحالي وإخفاء العنصر السابق بناءً على الفهرس
function showNextDiv() {
    // قم بإخفاء العنصر السابق
    $("body > div").eq(currentIndex - 1).hide();
    
    // قم بإظهار العنصر الحالي
    $("body > div").eq(currentIndex).show();
    
    // زيادة فهرس العنصر الحالي للانتقال إلى العنصر التالي في الوقت المناسب
    currentIndex++;
    
    // تحقق مما إذا كان الفهرس قد وصل إلى آخر عنصر div، وإعادة البدء إذا كان الأمر كذلك
    if (currentIndex >= $("body > div").length) {
        currentIndex = 0;
    }
    
    // اختر المدة التي تريد أن يظهر فيها العنصر الحالي (بالمللي ثانية)
    var displayTime = 3000; // مثال: 3 ثواني
    
    // بمجرد انتهاء الفترة المحددة، قم بإخفاء العنصر الحالي وإظهار العنصر التالي
    setTimeout(showNextDiv, displayTime);
}

// ابدأ عملية إظهار العناصر
showNextDiv();

هذا الكود يقوم بإخفاء كل العناصر div المباشرة كأطفال لعنصر body، ثم يبدأ في إظهار كل عنصر div بتتابع وفقًا للزمن المحدد. بعد ذلك، يقوم بإخفاء كل عنصر بعد انتهاء الزمن وإظهار العنصر التالي في التسلسل. ويُكرر هذه العملية لكل العناصر div الموجودة.

بهدف تحقيق هذا الهدف، يمكننا استخدام جافا سكريبت لتنظيم عملية إظهار وإخفاء العناصر بشكل تتابعي بناءً على الزمن المحدد. يتضمن الحل استخدام دوال التوقيت setTimeout() و setInterval() لتنظيم فترات الظهور والاختفاء.

لنبدأ بوضع خطة لتنفيذ هذا الهدف:

1. أولاً، سنخفي جميع عناصر div المباشرة كأطفال لعنصر body.
2. ثم سنقوم بإظهار العنصر الأول.
3. بعد فترة معينة، سنقوم بإخفاء العنصر الحالي وإظهار العنصر التالي.
4. وسنكرر هذه العملية بشكل مستمر لجميع العناصر div المتاحة.

تعتمد عملية الإظهار والإخفاء على الفهرس الحالي لكل عنصر، حيث يتم ظهور العنصر الحالي وإخفاؤه بعد انتهاء الزمن المحدد، ثم يتم التبديل إلى العنصر التالي في التسلسل.

الآن دعونا نرى كيف يمكن تطبيق هذه الخطة بشكل مفصل في الكود:

javascriptCopy code
// قم بتحديد المؤشر إلى العنصر الأول
var currentIndex = 0;

// قم بإخفاء جميع العناصر div المباشرة كأطفال لعنصر body
$("body > div").hide();

// عرّف دالة لعملية إظهار العناصر بشكل تتابعي
function showNextDiv() {
    // قم بإظهار العنصر الحالي
    $("body > div").eq(currentIndex).show();
    
    // زيادة الفهرس للانتقال إلى العنصر التالي في التسلسل
    currentIndex++;
    
    // تحقق مما إذا كان الفهرس قد وصل إلى آخر العناصر، وفي هذه الحالة، قم بالعودة للبداية
    if (currentIndex >= $("body > div").length) {
        currentIndex = 0;
    }
}

// قم بتعيين المدة الزمنية لظهور كل عنصر (بالميللي ثانية)
var displayTime = 3000; // مثال: 3 ثواني

// ابدأ بعملية إظهار العناصر بشكل دوري وفقًا للزمن المحدد
var intervalId = setInterval(function() {
    // قم بإظهار العنصر الحالي
    showNextDiv();
    
    // اختر المدة التي يظهر فيها العنصر الحالي قبل أن يتم إخفاؤه
    setTimeout(function() {
        // قم بإخفاء العنصر الحالي بعد انتهاء الزمن المحدد
        $("body > div").eq(currentIndex - 1).hide();
    }, displayTime);
}, displayTime);

// يمكنك إلغاء العملية التكرارية بواسطة تنفيذ الأمر التالي
// clearInterval(intervalId);

هذا الكود يضمن إظهار العناصر div بشكل متتابع وفقًا للزمن المحدد، حيث يتم عرض العنصر الحالي، ثم إخفاؤه بعد انقضاء الزمن المحدد، ومن ثم يتم التبديل إلى العنصر التالي في التسلسل. تُكرر هذه العملية بشكل متكرر بواسطة setInterval() لضمان استمرارية العملية.