وصول تفويض الحدث / واجهة برمجة التطبيقات

0

أقوم ببناء مجمع أخبار لمشروع شخصي ويتضمن الحصول على معلومات من واجهة برمجة تطبيقات. لدى api فئات مختلفة للاختيار من بينها. الأعمال والرياضة والتكنولوجيا وما إلى ذلك. لدي صفحة منفصلة لكل فئة. لقد أنشأت الصفحة الرئيسية بأهم الأخبار التي لا تتضمن سحب المعلومات من فئة معينة وهي تعمل بشكل جيد. أواجه مشكلة عند محاولة النقر فوق ارتباط إلى صفحة أخرى. على سبيل المثال ، عندما أنقر على الرابط للانتقال إلى صفحة الأعمال ، أود تغيير "الفئة" في رأس واجهة برمجة التطبيقات إلى الأعمال ثم عرض أهم الأخبار من فئة الأعمال.

HTML ذات الصلة

<ul class="nav-list" id="nav-list">
            <li class="home"><a href="index.html">Home</a></li>
            <li class="business"><a href="business.html" class="business">Business</a></li>
            <li class="entertainment"><a href="entertainment.html">Entertainment</a></li>
            <li class="health"><a href="health.html">Health</a></li>
            <li class="science"><a href="science.html">Science</a></li>
            <li class="sports"><a href="sports.html">Sports</a></li>
            <li class="technology"><a href="technology">Technology</a></li>
          </ul>

إنني أختبر فقط مع فئتي "المنزل" و "الأعمال" حتى الآن لذا فإن هذه هي التركيز.

جافا سكريبت ذات الصلة

let newCategory = '';
const navList = document.getElementById('nav-list');

وصول API

var xhr = new XMLHttpRequest();
xhr.open('GET', url + 'category=' + newCategory, true);
xhr.onload = function () {
  var data = JSON.parse(xhr.responseText);
  console.log(data);
  for (var i = 0; i < 7; i++) {
    cardTitle[i].innerHTML = data.articles[i].title;
    cardSubTitle[i].innerHTML = data.articles[i].description;
    source[i].innerHTML = data.articles[i].source.name;
    if (data.articles[i].urlToImage != null) {
      image[i].src = data.articles[i].urlToImage;
    }else {
      image[i].src = 'no-image.jpg';
    }
  }
};

xhr.send();

مستمع الحدث

navList.addEventListener('click', function (e) {
  console.log(e.target.nodeName);
  if (e.target.className == 'business') {
    console.log('hello');
    newCategory = 'business';
    console.log(newCategory);
  }
}, false);

لقد قمت بإعداد newCategory متغير لمحاولة تمريره من خلال xhr.open() . عندما أعلن newCategory وتعيينه على "الأعمال" على الفور يعمل المتغير. يعطيني API أخبارًا من فئة الأعمال. لسوء الحظ ، تعطيني أخبار الأعمال في كل صفحة.

أيضًا ، عندما أختبر مستمع الأحداث ، يبدو أنه يعمل بشكل جيد. عندما console.log(e.target.nodeName); تقوم بإرجاع "A". console.log('hello'); إرجاع "مرحبًا" و console.log(newCategory); إرجاع "الأعمال". المشكلة الوحيدة هي أنه عندما أقوم بالنقر فوق الرابط إلى صفحة الأعمال ، يعمل كل شيء في مستمع الأحداث باستثناء أن الصفحة لا تعرض أخبار الأعمال. إنه يعرض فقط ما على الصفحة الرئيسية.

** ملاحظة ** لا يظهر كل ما أقوم بتسجيل الدخول إلى وحدة التحكم إلا لجزء من الثانية عندما أقوم بالنقر ثم يختفي ، لذلك لست متأكدًا مما إذا كانت أخبار الأعمال يتم عرضها فقط لجزء من الثانية أيضًا.

أي بصيرة ستكون رائعة. شكرا لك مقدما.

1 إجابة

0

بدون رؤية المزيد من الشفرة ، يبدو أن شفرتك تنتقل بعيدًا عن الصفحة إلى الرابط في href. تتلقى قائمة التنقل التي حددتها للاستماع إلى حدث النقر حدث النقر من الرابط الذي تم تفجيره. وبحلول الوقت الذي يتم فيه تقريب السلوك الافتراضي للرابط وهو الانتقال بعيدًا عن الصفحة ، يكون قد تم بالفعل. يمكنك إضافة الكود أدناه لمنع السلوك الافتراضي لجميع الروابط في navList:

document.querySelectorAll('#nav-list li a').forEach((val)=>{
  val.addEventListener('click', (e)=> e.preventDefault());
});

أيضًا إذا لم يتم تغليف طلب xhr في دالة ، فلا يمكن استدعاء xhr إلا في المرة الوحيدة.

:مؤلف

أسئلة ذات صلة

فوق
قائمة طعام