مشكلة في استخدام querySelector مع indexOf تعيد دومًا -1 في جافاسكريبت

Mahmoud Ali Nawwar · 24 فبراير 2022

السلام عليكم

أردت تحديد بعض الصور بواسطة querySelector وقمت بتحويلها الى array ولكن عد طبع indexOf يقوم دوما بطبه الرقم -1
شيفرة HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="box">
          <div class="img">
            <img src="imgs/dish-1.png" alt="" />
          </div>
          <div class="cap">
            <h2>item</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
          </div>
        </div>

        <div class="box">
          <div class="img">
            <img src="imgs/dish-2.png" alt="" />
          </div>
          <div class="cap">
            <h2>item</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
          </div>
        </div>
        <div class="box">
          <div class="img">
            <img src="imgs/dish-3.png" alt="" />
          </div>
          <div class="cap">
            <h2>item</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
          </div>
        </div>
        <div class="box">
          <div class="img">
            <img src="imgs/dish-4.png" alt="" />
          </div>
          <div class="cap">
            <h2>item</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
          </div>
        </div>
        <div class="box">
          <div class="img">
            <img src="imgs/dish-5.png" alt="" />
          </div>
          <div class="cap">
            <h2>item</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
          </div>
        </div>
        <div class="box">
          <div class="img">
            <img src="imgs/dish-6.png" alt="" />
          </div>
          <div class="cap">
            <h2>item</h2>
            <p>Lorem, ipsum dolor sit amet consectetur adipisicing.</p>
          </div>
        </div>
      </div>
    </div>

    <div class="selected-box">
      <div class="selected-img">
        <i class="far fa-arrow-alt-circle-left left"></i>
        <i class="far fa-times-circle times"></i>
        <i class="far fa-arrow-alt-circle-right right"></i>
      </div>
    </div>
    
    <script src="main.js"></script>
  </body>
</html>

شيفرة جافاسكريبت

for (i=0;i<imgList.length ; i++){
  imgList[i].addEventListener('click', function(e){   
    var n = imgList.indexOf(e.target)
    console.log(n)
  })
}

تم التعديل في 24 فبراير 2022 بواسطة Hassan Hedr
إرفاق الشيفرة وتوضيح العنوان

Hassan Hedr · 24 فبراير 2022

يرجى إرفاق كل من شيفرة جافاسكريبت وشيفرة HTML للمستند الذي تقوم بمحاولة التطبيق عليه

Mahmoud Ali Nawwar · 24 فبراير 2022

هذا هو رابط المشروع

pro.zip

بتاريخ الآن قال Hassan Hedr:

يرجى إرفاق كل من شيفرة جافاسكريبت وشيفرة HTML للمستند الذي تقوم بمحاولة التطبيق عليه

تم ارفاقه

Hassan Hedr · 24 فبراير 2022

المشكلة هي عندما يتم تسجيل استماع للحدث click على الحاوية div فإن المستخدم عند ضغطه على الصورة سيتم تنفيذ التابع المسجل للحاوية div باعتبار أن الصورة داخلها وسيتم تعيين الهدف للحدث event.target على أنه الصورة وليس الحاوية لأن المستخدم سيضغط على الصورة

لحل المشكلة سجل تابع للاستماع للأحداث على الصور مباشرة وليس الحاويات التي لها الصنف img كالتالي:

var imgList = Array.from(document.querySelectorAll('.box img'))
                                  ^^^^^^^^^^^^^^^^  ^^^^^^^^

(ملاحظة: يرجى عند إضافة سؤال إرفاق الشيفرة المتعلقة بالسؤال بشكل نصي ضمن نص السؤال وتنسيقها كشيفرة ليتمكن الزوار من مساعدتك)

مشكلة في استخدام querySelector مع indexOf تعيد دومًا -1 في جافاسكريبت

السؤال

Mahmoud Ali Nawwar

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

Hassan Hedr

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mahmoud Ali Nawwar

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Hassan Hedr

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية