التعديل على جزء من الصفحة عند النقر على أيقونة ضمن div

يمكنك تطبيق دالة closets على ال collection التي قمت بعمل استعلام لها وهي allSections. أي

parents = allSections.closest('div'); 

ثم

parents.forEach(function(element) {
  element.addEventListener('click', (e) =>{
    console.log(e.target.dataset.id);
  }
});

لا أدري لماذا لم تعمل معي و لاني اردت إستخدامها لشيء آخر  أردت ان اختصر ب console لأريكم , هل لو استعملت الأيدي مرتين لا يؤثر في العنصؤ الاب div  و icon ؟

    // SECTIONS ACTIVE
    allSections.addEventListener('click', (e) =>{
        const id = e.target.dataset.id ;
        if(id){
            // REMOVE SELECTED FROM OTHER BTNS
            sectbtns.forEach((btn)=> {
                btn.classList.remove('active');
            })
            e.target.classList.add('active');

            // HIDE OTHER SECTIONS 

            sections.forEach((section)=>{
            section.classList.remove('active')
            })

            const element = document.getElementById(id);
            element.classList.add('active')
        }
    })
   
}

pageTransitions();

بتاريخ 10 ساعات قال Wael Aljamal:

يمكنك تطبيق دالة closets على ال collection التي قمت بعمل استعلام لها وهي allSections. أي

parent = allSections.closest('div'); 

ثم

parent.addEventListener('click', (e) =>{
	console.log(e.target.dataset.id);
}

 

بتاريخ الآن قال Brahim Semmani:

لا أدري لماذا لم تعمل معي و لاني اردت إستخدامها لشيء آخر  أردت ان اختصر ب console لأريكم , هل لو استعملت الأيدي مرتين لا يؤثر في العنصؤ الاب div  و icon ؟

التعليق السابق معدل أرجو تحديث الصفحة، وأرجو إرفاق الملف لديك لنجرب تعديله وإصلاح المشكلة

من غير المحبذ استخدام نفس id أكثر من مرة

أعط الأيقونة أبعاد 100% و قم بإلغاء الحواشي و الهوامش لتطابق الأب

حسنا سأرفق الملف 

sky.rar

شكرا استاذ وائل

بتاريخ 11 دقائق مضت قال Brahim Semmani:

حسنا سأرفق الملف 

sky.rar

شكرا استاذ وائل

شكرا لك ابراهيم،

عند تجريب المشروع المرفق، والضغط على الأيقونة فهو يعمل في الجزء الثاني controlls ولا يعمل في main

حيث أضاف btn-active وهو مختلف عن الفيديو المرفق للشرح

بتاريخ 3 ساعات قال Brahim Semmani:

أم هل من الصحيح ان اكرر الايدي بهاذا الشكل لانني جربته يعمل بشكل عادي 

أعتقد و لتقليل التعقيد لأن الأيقونات في مكان و العناصر التي نريد التنقل بينها في مكان آخر (لأب آخر) ضع يمكنك تكرار data-id لا مشكلة بما أنه يحل المسألة