استفسار في eo.target جافاسكريبت

 const content = document.getElementsByClassName("content")[0];

هذا الجزء من الكود يستخدم للبحث فى جميع عناصر ال DOM الموجودة فى الصفحة و نتيجة تنفيذه هو إعادة كل العناصر التى تمتلك class يسمى content.

const content = eo.target.parentElement.parentElement.getElementsByClassName(
  "content"
)[0];

على العكس فإن هذا الكود يستخدم للبحث عن العناصر الابناء فى هذا العنصر فقط .

توضيح : 

1- eo.target هذا الجزء يستخدم للحصول على العنصر نفسه الذى هو item الذى بدوره هو ..plus .

2- parentElement.parentElement. يستخدم للحصول على العنصر الاب للعنصر item وهنا استخدمت مرتان للحصول على الجد للعنصر item الذي هو q1 او q2 

3- getElementsByClassName("content")[0] وهذا الجزء هو للحصول على الابناء للعنصر q1 او q2 

والتى تحمل class يسمى content

وهذا هو الحل الافضل لاننا نبحث عن العنصر contetn الابن الخاص بالسؤال

eo في الكود هي إختصار لـ event object و هو عبارة عن كائن يتم تمريره لدالة رد النداء عند حدوث حدث ما، يحتوي ذلك الكائن على عدة خصائص تتعلق بالحدث نفسه، إن كنت مهتم بالتعرف على كل تلك الخصائص بإمكانك تصفح: Event properties

أو بإمكانك إنشاء زر بسيط و التسمع على حدث الضغط على ذلك الزر:

<button id="myBtn">click</button>

ثم في جافاسكربت تكتب:

document.getElementById('myBtn').addEventListener("click", function(eventObject) {
  eventObject.preventDefault();
  console.log(eventObject)
});

ثم تضغط على الزر و تشاهد النتيجة في الكونسول من خلال أدوات المطورين في المتصفح.

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

في حالتك:

const allplus =document.querySelectorAll(".plus")

السطر السابق سيُحدد كل العناصر التي تملك الصنف plus و يُعيد مصفوفة، وهي كلها عبارة عن عناصر span تملك صنف plus.

ثم من خلال forEach تقوم بالدوران على عناصر تلك المصفوفة و التسمع على حدث click عليها، ثم معالجة الحدث من خلال دالة رد النداء:

(eo) => {

  let content=  eo.target.parentElement.parentElement.getElementsByClassName("content")[0];
  content.classList.toggle("mm")

}

عبارة عن دالة سهمية، تقوم بجلب عُنصر ال div الموجود تحت عُنصر span و الذي يملك الصنف content ثم تقوم بتبديل الصنف mm إن كان موجود تقوم بحذفه و إن كان غير موجود تقوم بإضافته.

eo.target هو العُنصر الذي تسبب في الحدث.

parentElement هو أب العُنصر الحالي استخدم مرتين للصعود درجتين.

getElementsByClassName لتحديد العناصر عن طريق إسم الصنف و تُعيد مصفوفة عناصر.