jQueryポップアップウィンドウとajaxページングロードタブ分類データの詳細(xì)な説明

この記事では、jQueryを使用してボタンをクリックするポップアップウィンドウを?qū)g裝し、ajaxを介してタブ分類IDに対応するデータをロードし、各タブが下部にスクロールするときに次のページデータを自動(dòng)的にロードする方法について詳しく説明します。質(zhì)問(wèn)に記載されているコードには重要な欠陥があります。タブがクリックされるたびに、以前のロードされたデータがクリアされず、異なるタブのコンテンツが混合されます。以下は、コードを改善し、実裝の詳細(xì)を説明します。

まず、問(wèn)題の中核は、各タブに対応するAJAX要求とデータを正しく管理する方法であることを理解する必要があります。元のコードの問(wèn)題は、LoadCategoryData関數(shù)では、スクロールイベントのリスナーが常に同じ.tab_item要素で動(dòng)作し、異なるカテゴリのデータが互いに干渉することです。解決策は、各タブのデータ読み込みプロセスに獨(dú)立変數(shù)と狀態(tài)管理を設(shè)定することです。

改良されたコードは次のとおりであり、実際のAJAX要求は、理解とテストの簡(jiǎn)単なテストのためにシミュレートされたデータに置き換えられます。

 



  
  
  <meta name="Viewport" content="width = device-width、initial-scale = 1.0">
  <title> document </title>
  <style>
    .tab_p {
      ディスプレイ：Flex;
    }

    .tab_item {
      高さ：300px;
      オーバーフロー：自動(dòng);
    }

    .tab_item img {
      高さ：50px;
      オブジェクトフィット：カバー;
    }
  </style>



  <div class="btn">ポップアップウィンドウをクリックして、分類1データを読み込みます</div>

  <div class="tab_p">
    <p data-id="1">カテゴリ1 </p>
    <p data-id="2">カテゴリ2 </p>
    <p data-id="3">カテゴリ3 </p>
  </div>
  <div class="tab_content">
    <div class="tab_item">
      
    </div>
  </div>

 

  //バックエンドによってページの合計(jì)數(shù)が返されるため、合計(jì)ページの數(shù)を持つ必要はありません。フロントエンドはページの総數(shù)を知る必要はありませんが、現(xiàn)在のページ番號(hào)のみを知る必要があります//分類ID現(xiàn)在の合計(jì)の初期化 
  let categoryid = 1、currentPage = 1、合計(jì)= 0;
  //ロードlet asloading = false;

  $（document）.on（ 'click'、 '.btn'、function（）{
    loadcategorydata（categoryid、currentPage）;
  }）

  $（'。tab_pp '）。クリック（function（）{
    currentPage = 1;
    categoryid = $（this）.data（ 'id'）;
    //対応する分類データLoadCategoryData（categoryId、currentPage）をロードします。
  }）

  function loadcategorydata（id、page）{
    $（ "。tab_item"）。html（ 'loading ...'）;
    $（this）.addclass（ 'cur'）。siblings（）。removeclass（ 'cur'）;
    loadpagedata（id、page）;
  }

  //スクロールイベント$（'。tab_item '）を聞く。scroll（function（）{
    console.log（ 'scroll ...'、$（ '。tab_item'）。scrolltop（）、$（ '。tab_item'）。innerheight（）））
    if（isloading）{
      戻る;
    }
    //下位距離にスクロールするかどうかを決定150pxその他const scrolltop = $（this）.scrolltop（）;
    const scrollheight = $（this）.prop（ 'scrollheight'）;
    const containerheight = $（this）.outerheight（）;

    if（scrollheight -scrolltop -containerheight  {
      setimeout（（）=> {
        //ランダムにページデータconst list = [];
        //毎回20個(gè)のデータを返します（var i = 0; i  {
      //更新されたページの総數(shù)合計(jì)= TotalPages;
      let html = "";
      for（var i = 0; i <list.length i html="'<div"> <img  src="'%20list%20%5Bi%5D%20.img_url%20'" alt="jQueryを使用してポップアップウィンドウを?qū)g裝し、Ajaxのページングにタブ分類データをロードし、データの混亂の問(wèn)題を解決する方法は？" > <span> "' list [i] .title '" </span> ';
      }
      $（ "。tab_item"）。append（html）;
    }）。最後に（（）=> {
      Isloading = false;
    }）;
  }


</list.length>

このコードは、Isloading変數(shù)を介して重複リクエストを回避し、Promiseを使用して非同期操作を処理して、データ読み込みの順序と正しさを確保します。同時(shí)に、スクロールイベントの下部からの距離を判斷することにより、次のページの読み込みがトリガーされ、ユーザーエクスペリエンスが向上します。実際のアプリケーションでは、 /ajax.php?mod=tabインターフェイスを?qū)g際の條件に従って置き換える必要があることに注意する必要があります。さらに、バックエンドによって返されるデータには、次のページデータをロードする必要があるかどうかをフロントエンドが正確に判斷できるように、ページ情報(bào)の総數(shù)を含める必要があります。

以上がjQueryを使用してポップアップウィンドウを?qū)g裝し、Ajaxのページングにタブ分類データをロードし、データの混亂の問(wèn)題を解決する方法は？の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。