كيف يمكن الوصول إلى العنصر الذي تلقى الحدث بشكل ديناميكي في جافاسكريبت؟

علي الكاسر · 26 مايو 2022

<button data-gh="go" data-id="div">go</button>
<button data-gh="go" data-id="div2">go2</button>
<div id="div" style="display:none">
  <h2>Hello World</h2>
</div>
<div id="div2" style="display:none">
  <p>welcome to the chat </p>
</div>
<script>
  var tag =  document.querySelectorAll('[data-gh="go"]'); //تحديد جميع العناصر التي تحمل السمة data-gh="go"
  tag[0].onclick = function(){
    document.getElementById(tag[0].dataset.id).style.display="block";
  }
  tag[1].onclick = function(){
    document.getElementById(tag[1].dataset.id).style.display="block";
  }
</script>

لدينا في الكود عدد اثنين ازرار يشتركان معا في السمة data-gh="go"

ويختلفان في قيم السمة data-id

ولدينا عدد اثنين div مخفيان ، يتم اظهار كل div عند الضغط على الزر الخاص به

بالنسبة لكود جافا سكربت فقد قمت بتحديد الزرين بواسطة هذا الامر

var tag =  document.querySelectorAll('[data-gh="go"]');

ويعتبر المتغير tag مصفوفه وهذا الشي يعرفه كل محترغي جافا سكربت

اما هذا الامر

tag[0].onclick = function(){
    document.getElementById(tag[0].dataset.id).style.display="block";
  }

فيقوم بعمل حدث الضغط على احد الازرار ثم تشغيل داله لتقوم باظهار الdiv المخفي

السؤال

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

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

Hassan Hedr · 26 مايو 2022

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

// 01 - استعلام عن العناصر
var tags = document.querySelectorAll('[data-gh="go"]');

// 02 - المرور على العناصر
tags.forEach(function (button) {
  // 03 - إضافة معالج الحدث 
  button.addEventListener("click", function () {
    document.getElementById(this.dataset.id).style.display = "block";
  })                        ^^^^
});

أو يمكنك أيضًا الإشارة إلى العنصر فورًا من داخل الحلقة كالتالي:

tags.forEach(function (button) {
  button.addEventListener("click", function () {
    document.getElementById(button.dataset.id).style.display = "block";
  })                        ^^^^^^
});

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

tags.forEach((button) => button.addEventListener("click", handleClickEvent));

function handleClickEvent() {
  document.getElementById(this.dataset.id).style.display = "block";
}

عمر قره محمد · 26 مايو 2022

يجب ان يكون الحل بشكل يشبه التالي :

for (let index = 0; index < tag.length; index++) {
        tag[index].onclick = function () {
          document.getElementById(tag[index].dataset.id).style.display =
            "block";
        };
      }

تم التعديل في 26 مايو 2022 بواسطة عمر قره محمد

كيف يمكن الوصول إلى العنصر الذي تلقى الحدث بشكل ديناميكي في جافاسكريبت؟

السؤال

علي الكاسر

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

Recommended Posts

Hassan Hedr

عمر قره محمد

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية