كيف يمكن عمل toggle باظهار واخفاء عنصر عن طريق الجافاسكربت؟

هل حاولت الاستفادة من الحدث mouseleave لإظهار العنصر بعد اخفاءه؟ 

بداية، لن يكون هنالك حاجة من كل هاته الشيفرة:

contslide.addEventListener("mouseover",(eo) => {
    const pNum=document.querySelector(".pNum")
    contslide.classList.toggle("aa")
    if( contslide.classList.contains("aa") ){
        pNum.classList.toggle("pNum")
    } 
    else{
        pNum.classList.toggle("kk")
    }
})

لأننا سنركز على ازالة الصنف الذي يتحكم في اظهار العنصر، وهو الصنف pNum.

وبما انه هو الآخر سيتم ازالته واضافته فإنه لا يعد طريقة جيدة لتحديد العنصر المستهدف. ما رأيك في اعطاء معرف id بقيمة pNum للعنصر؟

<p id="pNum" class="pNum">1 - 5</p>

يمكن تلخيص كامل الشيفرة في:

contslide.addEventListener("mouseover",(eo) => {
    const pNum=document.querySelector("#pNum")
    pNum.classList.remove("pNum")
})

بعد هذا سنأتي للحدث mouseleave كـ:

contslide.addEventListener("mouseleave",(eo) => {
    const pNum=document.querySelector("#pNum")
    pNum.classList.add("pNum")
})

فتكون كاملا:

const contslide=document.querySelector(".contslide")

contslide.addEventListener("mouseover",(eo) => {
    const pNum=document.querySelector("#pNum")
     pNum.classList.remove("pNum")
})

contslide.addEventListener("mouseleave",(eo) => {
    const pNum=document.querySelector("#pNum")
    pNum.classList.add("pNum")
})

أو اختصارا:

const contslide=document.querySelector(".contslide")
const pNum = document.querySelector("#pNum")
const events = ['mouseover' ,'mouseleave'];

events.forEach(function(event) {
   contslide.addEventListener(event ,(eo) => {
      pNum.classList.toggle("pNum")
   })
})

فهم الأحداث في جافاسكربت

طيب ايه السبب اللي خلي الكود بتاعي ميشتغلش

بتاريخ 20 دقائق مضت قال zainb mohd:

طيب ايه السبب اللي خلي الكود بتاعي ميشتغلش

لأنك تقومين بتغيير حالة العنصر عند المرور عليه فقط. فأنت تقومين باظهاره واخفاءه عند المرور عليه فقط. أما المطلوب هو:

• اخفاءه عند المرور
• اظهاره عند المغادرة

يقتضي هذا التعامل مع حدثي:

• مرور مؤشر الفأرة
• مغادرة مؤشر الفأرة