Java Script

تحتاج لنقل السطر الخاص بإضافة الكلاس إلى داخل ال addeventlistener ولكن بذلك لتحتاج لتعريف المتغير clicked لذلك حاول استخدام الحل التالي

const circles = document.querySelectorAll(".circle");
circles.forEach(circle => {
  circle.addEventListener('click', () => {
    circles.forEach(c => c.classList.remove("active"));
    const clicked = circle;
    clicked.classList.add("active");
  });
})

أعتقد أن المشكلة تكمن في كيفية التعامل مع المتغير `clicked` داخل حلقة `forEach `، حيث يمكن أن يؤدي ذلك إلى عدم القدرة على تحديث العنصر الصحيح بالكلاس "active".

لحل هذه المشكلة، يمكنك استخدام `event.currentTarget` بدلا من `clicked` داخل حلقة `forEach`.

ف event.currentTarget هو خاصية تستخدم في JavaScript للوصول إلى العنصر الذي تم ربط الحدث به داخل دالة الاستماع للحدث. ويعتبر currentTarget خاصية من خصائص كائن الحدث (event)، وهي تستخدم عادة للوصول إلى العنصر الذي تم تعيين الحدث عليه.

وعندما يتم تنفيذ حدث، يُمرر كائن الحدث نفسه إلى دالة الاستماع للحدث، وباستخدام currentTarget، يمكنك الوصول إلى العنصر الذي تم ربط الحدث به. هذا مفيد بشكل خاص عند استخدام حلقات الحدث مثل addEventListener على مجموعة من العناصر، حيث يمكن استخدام currentTarget لتحديد العنصر الذي تم النقر عليه بدقة، يمكنك تجربة هذا الكود بهذا الشكل:

const circles = document.querySelectorAll(".slider-sec .circles .circle");

circles.forEach(circle => {
  circle.addEventListener('click', (event) => {
    circles.forEach(element => {
      element.classList.remove("active");
    });
    event.currentTarget.classList.add("active");
  });
});