كيفية إظهار عنصر عند النقر على زر في جافاسكربت

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

السلام عليكم

قمت بإنجاز img slide كالتالي:

عند النقر على الأزرار الدائرية من اليسار إلى اليمين تظهر الصورة المناسبة و يصبح الدائرة ملونة (تمام)

لكن عند النقر من اليمين إلى اليسار console يظهر الصورة المناسبة لكن الصورة لاتظهر.

شيفرة html

javascript

 

شكرا جزيلا

هنا أيضا الصورة لا تظهر

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

بتاريخ 28 دقائق مضت قال Hassan Hedr:

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

هذه واجهة التطبيق الذي أنا بصدد القيام به:

ما أريده هو عند الضغط على أي دائرة في الأسفل تصبح الدائرة ملونة و تظهر الصورة المناسبة.

المشكل الذي أواجهه هو ظهور الصورة المناسبة عند الضغط الدائرة (ليست لدي مشكلة في لون الدائرة عند الضغط عليها)

بحيث: إذا كانت الدائرة رقم 1 هي الدائرة من اليسار و هكذا دواليك، في هذه الحالة الكود يعمل بشكل جيد

لو فرضنا أنني الآن مستوى الدائرة رقم 5، في هذه الحالة عندما أقوم بالضغط على الدائرة 2 (كمثال) فإن console يفهم أني مستوى الصورة الثانية لكن الصورة لا تظهر

الشيفرة:

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 < 5) {
        
        imgs[index].classList.remove("active")
        index ++
        imgs[index].classList.add("active")

    } else if(index == 5){

        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 = 5
        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") 
        }
        
    }

}


// console.log(cercles)
cercles.forEach((item, i) => {

  
  item.addEventListener('click', (element) => {
    
    console.log(cercles[i].getAttribute('data-clic'))
    console.log(imgs[i].getAttribute('alt'))
    
    if(cercles[i].getAttribute('data-clic') === imgs[i].getAttribute('alt')) {
        imgs[i].classList.add("active")
    }

    cercles.forEach(option => {
      // console.log(option)
      option.classList.remove('active-cercle');

    })
    
    item.classList.add('active-cercle');
    
  });

});

شكرا لكم و أعتذر عن عدم وضوح السؤال

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

شكرا لكم و أعتذر عن عدم وضوح السؤال

هل يمكنك إرفاق شيفرة HTML أيضًا حتى يتوضح المثال بشكل كامل مع استفسارك

تعتبر كل المرفقات متغيرات تخضع للحالة العامة والتي تكون عادة كـ: 

• ارفاق حدث النقر بالزر. 
• تشغيل شيفرة أو وظيفة اخفاء العنصر عند استهداف هذا الحدث. 

ستحتاج في هذا التعامل مع نموذج كائن الوثيقة DOM عن طريق تحديد الزر المراد واضافة حدث النقر له، ويكون ذلك بشكل مشابه: 

var my_button = document.querySelector('#button-id');
var my_element = document.querySelector('#element-id');

my_button.addEventListener('click' ,function(){
      
     my_element.style.display = 'none';
   
})

قد يمكن تطوير هذا التطبيق ليمكن اخفاء عنصر ما واظهار آخر وفق هذا الحدث، كما يمكن تشغيل شيفرة أو وظيفة الاخفاء او الاظهار في خلال مهلة او فترة زمنية، أو اي ما تخدمه حاجتك.

فيما يلي: 

• توثيق التابع querySelector.
• سؤال عن ما هو استعمال addEventListener.

بتاريخ 1 ساعة قال Hassan Hedr:

هل يمكنك إرفاق شيفرة HTML أيضًا حتى يتوضح المثال بشكل كامل مع استفسارك

تفضل

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Slider JS</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>



  <div class="slider">

    <div class="cont-slides">

      <img src="imgs/img1.jpg" class="active" alt="1">

      <img src="imgs/img2.jpg" alt="2">

      <img src="imgs/img3.jpg" alt="3">

      <img src="imgs/img4.jpg" alt="4">

      <img src="imgs/img5.jpg" alt="5">

      <img src="imgs/img6.jpg" alt="6">

    </div>

    <div class="commandes">

      <button class="left" type="button" title="left">

        <img src="imgs/left.svg" alt="">

      </button>

      <button class="right" type="button" title="right">

        <img src="imgs/right.svg" alt="">

      </button>

    </div>

    <div class="cercles">

      <button data-clic="1" class="cercle active-cercle" type="button" title="cercle1"></button>

      <button data-clic="2" class="cercle" type="button" title="cercle2"></button>

      <button data-clic="3" class="cercle" type="button" title="cercle3"></button>

      <button data-clic="4" class="cercle" type="button" title="cercle4"></button>

      <button data-clic="5" class="cercle" type="button" title="cercle5"></button>

      <button data-clic="6" class="cercle" type="button" title="cercle6"></button>

    </div>

  </div>





    <script src="script.js"></script>

</body>

</html>

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

تفضل

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Slider JS</title>

    <link rel="stylesheet" href="style.css">

</head>

<body>



  <div class="slider">

    <div class="cont-slides">

      <img src="imgs/img1.jpg" class="active" alt="1">

      <img src="imgs/img2.jpg" alt="2">

      <img src="imgs/img3.jpg" alt="3">

      <img src="imgs/img4.jpg" alt="4">

      <img src="imgs/img5.jpg" alt="5">

      <img src="imgs/img6.jpg" alt="6">

    </div>

    <div class="commandes">

      <button class="left" type="button" title="left">

        <img src="imgs/left.svg" alt="">

      </button>

      <button class="right" type="button" title="right">

        <img src="imgs/right.svg" alt="">

      </button>

    </div>

    <div class="cercles">

      <button data-clic="1" class="cercle active-cercle" type="button" title="cercle1"></button>

      <button data-clic="2" class="cercle" type="button" title="cercle2"></button>

      <button data-clic="3" class="cercle" type="button" title="cercle3"></button>

      <button data-clic="4" class="cercle" type="button" title="cercle4"></button>

      <button data-clic="5" class="cercle" type="button" title="cercle5"></button>

      <button data-clic="6" class="cercle" type="button" title="cercle6"></button>

    </div>

  </div>





    <script src="script.js"></script>

</body>

</html>

 

أعتقد أني وجدت الحل

عندما أقوم بالنقر على دائرة معينة يجب علي إخفاء كافة الصور ثم إظهار الصورة المعنية

الشيفرة صارت إذا

cercles.forEach((item, i) => {

    item.addEventListener('click', (element) => {

    //   console.log(cercles[i].getAttribute('data-clic'))

    //   console.log(imgs[i].getAttribute('alt'))

    //   if(cercles[i].getAttribute('data-clic') === imgs[i].getAttribute('alt')) {

    //       imgs[i].classList.add("active")

    //   } else{

    //     imgs[i].classList.remove("active")

    //   }

      cercles.forEach(option => {

        // console.log(option)

        option.classList.remove('active-cercle');

      })

      imgs.forEach(img => {

        // console.log(option)

        img.classList.remove('active');

      })

      item.classList.add('active-cercle');

      imgs[i].classList.add("active")

    });

  });

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

تفضل

هناك خطأ لديك أنه عند إضافة الصنف active على الصورة يتم ذلك بشكل صحيح، لكنك لا تقوم بحذف ذلك الصنف من باقي الصور وهذا ضروري حيث أنك تريد لصورة واحدة فقط في كل مرة أن تمتلك الصنف active، يمكنك إضافة السطر التالي قبل عملية إضافة active لمسح هذا الصنف من جميع الصور كالتالي:

// مسح الصنف من جميع الصور
imgs.forEach(img => img.classList.remove('active'))

// إضافة الصنف للصورة المستهدفة
if (cercles[i].getAttribute("data-clic") === imgs[i].getAttribute("alt")) {
  imgs[i].classList.add("active");
}