اذهب إلى المحتوى
  • 0

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

علي الكاسر

السؤال

<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 المخفي 

السؤال

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

 

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

Recommended Posts

  • 1

يمكنك بعد الاستعلام عن قائمة العناصر المراد إضافة معالج الحدث 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";
}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0

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

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

 

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

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...