كيفية تحديد عنصر فعال | مختار من بين عدة عناصر و خطأ بالوصول لعنصر ضمن classList في لغة الجافا سكريبت

لنفرض لدينا قائمة من العناصر القائمة لها صنف items و العناصر item-option

<ul class="items">
  <li class="item-option" data-item="0">1</li>
  <li class="item-option" data-item="1">2</li>
  <li class="item-option" data-item="2">3</li>
  <li class="item-option" data-item="3">4</li>
  <li class="item-option" data-item="4">5</li>
</ul>

في حال أردنا تطبيق صنف فعال على عنصر وحيد، يمكننا عند النقر على زر، حذف الصنف من جميع العناصر ثم إضافته للعنصر المنقور عليه.

// جلب جميع العناصر
const itemOptions = document.querySelectorAll('.items .item-option');

// المرور بحلقة
itemOptions.forEach((item, i) => {

  // حدث الاستماع للنقر على عناصر المصفوفة
  item.addEventListener('click', element => {
    // نزع الصنف selected
    // من جميع العناصر
    timeOptions.forEach(option => {
      option.classList.remove('selected');
    })
    // إضافة الصنف للعنصر الذي وقع عليه حدث النقر
    element.classList.add('selected');
  });
});

وفي حال الاستفادة من data-item التي فيها قيمة مميزة لكل عنصر

const itemOptions = document.querySelectorAll('.items .item-option');
    itemOptions.forEach((item, i) => {
      // جلب ترقيم العنصر
        const domIndex = item.getAttribute('data-item');
        item.addEventListener('click', () => {
            timeOptions.forEach(option => {
              option.classList.remove('selected');
            })
          // إضافة الصنف للعنصر المنقور
            if (i == domIndex) {
                item.classList.add('selected');
            }
        });
    });

وفي حال أردت استخدام جيكويري

const $items = $(".items .item-option");

$items.on("click", function() {
  $items.removeClass("selected");
  $(this).addClass("selected");
});

نجلب العناصر ثم نطبق حدث النصر على الجميع، وفيه نزيل الصنف من جميع العناصر ثم نضيفه للعنصر المنقور عليه

معنى هذا الخطأ أنك تحاول قراءة الخاصية classList لعنصر غير مُعرف

وهذا يحدث بسبب أنك تحاول قراءة العنصر cercles[i-1] وفي أول لفة يكون قيمة i بصفر وبالتالي i-1 يساوي -1 وبالتالي يُعطيك غير معرف, قم بوضع شرط أن يتأكد أن الi أكبر من صفر قبل القيام بتلك العملية عبر الشفرة التالية 

if(i>0)
	cercles[i-1].classList.remove("active-cercle")

بتاريخ 18 دقائق مضت قال شرف الدين2:

معنى هذا الخطأ أنك تحاول قراءة الخاصية classList لعنصر غير مُعرف

وهذا يحدث بسبب أنك تحاول قراءة العنصر cercles[i-1] وفي أول لفة يكون قيمة i بصفر وبالتالي i-1 يساوي -1 وبالتالي يُعطيك غير معرف, قم بوضع شرط أن يتأكد أن الi أكبر من صفر قبل القيام بتلك العملية عبر الشفرة التالية 

if(i>0)
	cercles[i-1].classList.remove("active-cercle")

 

شكرا أخي الكريم

الكود يعمل جيدا

لكن أعتقد أن الكود ليس جيد

i think that the code is not optimized.

بصراحة يسرني معرفة رأيكم و تقديم نصائح إن وجدت ليكون الكود أكثر إختصارا و تنظيما

شكرا

بتاريخ 7 دقائق مضت قال محمود سعداوي:

شكرا أخي الكريم

الكود يعمل جيدا

لكن أعتقد أن الكود ليس جيد

i think that the code is not optimized.

بصراحة يسرني معرفة رأيكم و تقديم نصائح إن وجدت ليكون الكود أكثر إختصارا و تنظيما

شكرا

في كل الأحوال الدالة قصيرة ولن يظهر مشكلة في الكود الخاص بها, بالنسبة لباقي الكود من الممكن وضعه في تعليق حتى نراه بشكلٍ جيد

بتاريخ 3 دقائق مضت قال شرف الدين2:

في كل الأحوال الدالة قصيرة ولن يظهر مشكلة في الكود الخاص بها, بالنسبة لباقي الكود من الممكن وضعه في تعليق حتى نراه بشكلٍ جيد

تفضل

Slider.rar

بتاريخ 5 دقائق مضت قال محمود سعداوي:

تفضل

Slider.rar

برجاء وضع الشفرة البرمجية في تعليق بدلًا من إرفاق المشروع

بتاريخ 12 دقائق مضت قال شرف الدين2:

برجاء وضع الشفرة البرمجية في تعليق بدلًا من إرفاق المشروع

const imgs    = document.querySelectorAll(".cont-slides img")
const precedent    = document.querySelector(".left")
const suivant   = document.querySelector(".right")
const cercles = document.querySelectorAll(".cercle")
let index     = 0

suivant.addEventListener("click", imgSuivante)
function imgSuivante() {
    if (index < 2) {
        
        imgs[index].classList.remove("active")
        index ++
        imgs[index].classList.add("active")

    } else if(index == 2){

        imgs[index].classList.remove("active")
        index = 0
        imgs[index].classList.add("active")

    }

    for (let i = 0; i < cercles.length; i++) {
        
        if (cercles[i].getAttribute('data-clic')-1 === index) {
            cercles[i].classList.add("active-cercle")
        } else{
            cercles[i].classList.remove("active-cercle") 
        }
        
    }

}

precedent.addEventListener("click", imgPrecedente)
function imgPrecedente() {
    if (index > 0) {
        
        imgs[index].classList.remove("active")
        index --
        imgs[index].classList.add("active")

    } else if(index == 0){

        imgs[index].classList.remove("active")
        index = 2
        imgs[index].classList.add("active")

    }

    for (let i = 0; i < cercles.length; i++) {
        
        if (cercles[i].getAttribute('data-clic')-1 === index) {
            cercles[i].classList.add("active-cercle")
        } else{
            cercles[i].classList.remove("active-cercle") 
        }
        
    }

}

for (let i=0; i<cercles.length; i++) {
    
    cercles[i].addEventListener("click", ()=>{

        if (i>0){
            cercles[i].classList.add("active-cercle")
            cercles[i-1].classList.remove("active-cercle")
            imgs[i].classList.add("active")
            imgs[i-1].classList.remove("active")
        }
        
        if (i===0){
            cercles[cercles.length-1].classList.remove("active-cercle")
            cercles[0].classList.add("active-cercle")
            imgs[0].classList.add("active")
            imgs[cercles.length-1].classList.remove("active")
            // console.log(imgs[i])
        }
        // console.log(imgs[i])

    })
}

بتاريخ 9 دقائق مضت قال محمود سعداوي:

 

الشفرة جيدة, من الممكن تحسينها عبر وضع بعض الcomments بها لشرح ما تفعله الدوال + عبر تغيير اسامي الدوال ليُصبح إسمها يُعبر عن ما تفعله بالظبط

بتاريخ On 29/03/2022 at 17:34 قال Wael Aljamal:

لنفرض لدينا قائمة من العناصر القائمة لها صنف items و العناصر item-option

<ul class="items">
  <li class="item-option" data-item="0">1</li>
  <li class="item-option" data-item="1">2</li>
  <li class="item-option" data-item="2">3</li>
  <li class="item-option" data-item="3">4</li>
  <li class="item-option" data-item="4">5</li>
</ul>

في حال أردنا تطبيق صنف فعال على عنصر وحيد، يمكننا عند النقر على زر، حذف الصنف من جميع العناصر ثم إضافته للعنصر المنقور عليه.

// جلب جميع العناصر
const itemOptions = document.querySelectorAll('.items .item-option');

// المرور بحلقة
itemOptions.forEach((item, i) => {

  // حدث الاستماع للنقر على عناصر المصفوفة
  item.addEventListener('click', element => {
    // نزع الصنف selected
    // من جميع العناصر
    timeOptions.forEach(option => {
      option.classList.remove('selected');
    })
    // إضافة الصنف للعنصر الذي وقع عليه حدث النقر
    element.classList.add('selected');
  });
});

وفي حال الاستفادة من data-item التي فيها قيمة مميزة لكل عنصر

const itemOptions = document.querySelectorAll('.items .item-option');
    itemOptions.forEach((item, i) => {
      // جلب ترقيم العنصر
        const domIndex = item.getAttribute('data-item');
        item.addEventListener('click', () => {
            timeOptions.forEach(option => {
              option.classList.remove('selected');
            })
          // إضافة الصنف للعنصر المنقور
            if (i == domIndex) {
                item.classList.add('selected');
            }
        });
    });

 

وفي حال أردت استخدام جيكويري

const $items = $(".items .item-option");

$items.on("click", function() {
  $items.removeClass("selected");
  $(this).addClass("selected");
});

نجلب العناصر ثم نطبق حدث النصر على الجميع، وفيه نزيل الصنف من جميع العناصر ثم نضيفه للعنصر المنقور عليه

شكرا لك أخي الكريم على المساعدة.

لكن أعتقد أنه عادة ما يقع تجنب إعتماد forEach داخل forEach لأنها تجعل المتصفح يستغرق الكثير من الوقت.

هل يوجد حل أفضل.

شكرا مسبقا.

بتاريخ 52 دقائق مضت قال محمود سعداوي:

شكرا لك أخي الكريم على المساعدة.

لكن أعتقد أنه عادة ما يقع تجنب إعتماد forEach داخل forEach لأنها تجعل المتصفح يستغرق الكثير من الوقت.

هل يوجد حل أفضل.

شكرا مسبقا.

 

كلام غير دقيق.

على كل حال، أول حلقةتقوم بإسناد دالة مستمع حدث النقر، والثانية لإزالة صنف أو أكثر من التنسيقات و إضافة صنف جديد.

يمكنك حفظ مرجعية للعنصر السابق و حذف الأصناف منه بدل عمل الحلقة الداخلية.