Bagaimana cara menggunakan jQuery untuk melaksanakan tingkap pop timbul, Ajax paging untuk memuatkan data diklasifikasikan tab dan menyelesaikan masalah kekeliruan data?

Penjelasan terperinci mengenai tetingkap pop-up jQuery dan data klasifikasi tab pemuatan paging ajax

Artikel ini akan menerangkan secara terperinci bagaimana menggunakan jQuery untuk melaksanakan tetingkap pop timbul butang mengklik dan memuatkan data yang sepadan dengan ID klasifikasi tab melalui AJAX, dan secara automatik memuatkan data halaman seterusnya apabila setiap skrol tab ke bahagian bawah. Kod yang disediakan dalam soalan mempunyai kecacatan utama: Setiap kali tab diklik, data yang dimuatkan sebelumnya tidak dibersihkan, menyebabkan kandungan tab yang berlainan dicampur bersama -sama. Berikut ini akan meningkatkan kod dan menerangkan butiran pelaksanaan.

Pertama sekali, kita perlu memahami bahawa teras masalah adalah bagaimana untuk menguruskan permintaan dan data AJAX dengan betul untuk setiap tab. Masalah dengan kod asal ialah dalam fungsi LoadCategoryData, pendengar acara tatal selalu bertindak pada elemen .tab_item yang sama, menyebabkan data kategori yang berbeza untuk mengganggu satu sama lain. Penyelesaiannya adalah untuk menetapkan pembolehubah bebas dan pengurusan negeri untuk proses pemuatan data setiap tab.

Kod yang lebih baik adalah seperti berikut, dan permintaan Ajax sebenar digantikan dengan data simulasi untuk pemahaman dan ujian yang mudah:

 



  <meta charset="utf-8">
  <meta http-equiv="x-ua-comple content" content="ie = edge">
  <meta name="viewport" content="width = peranti-lebar, skala awal = 1.0">
  <tirtment> Document 
  <yaya>
    .tab_p {
      Paparan: Flex;
    }

    .tab_item {
      Ketinggian: 300px;
      Limpahan: Auto;
    }

    .tab_item img {
      Ketinggian: 50px;
      Objek-Fit: Cover;
    }
  



  <div class="btn"> Klik pada tetingkap pop timbul saya dan klasifikasi beban 1 data </div>

  <div class="tab_p">
    <p data-id="1"> Kategori 1 </p>
    <p data-id="2"> Kategori 2 </p>
    <p data-id="3"> Kategori 3 </p>
  </div>
  <div class="tab_content">
    <div class="tab_item">
      
    </div>
  </div>

<script src="./%20jQuery.min.js"> </script>
<script>
  // Tidak perlu mempunyai jumlah halaman, kerana jumlah halaman dikembalikan oleh backend. Frontend tidak perlu mengetahui jumlah halaman, tetapi hanya perlu mengetahui nombor halaman semasa // Inisialisasi jumlah ID Klasifikasi semasa 
  biarkan kategoriId = 1, currentPage = 1, total = 0;
  // Adakah ia memuatkan biarkan isloading = false;

  $ (dokumen) .on (&#39;klik&#39;, &#39;.btn&#39;, fungsi () {
    LoadCategoryData (kategoriId, CurrentPage);
  })

  $ (&#39;. Tab_p p&#39;). Klik (fungsi () {
    CurrentPage = 1;
    kategoriId = $ (ini) .data (&#39;id&#39;);
    // Muatkan LoadCategoryData data klasifikasi yang sepadan (kategoriId, semasa);
  })

  fungsi loadCategoryData (id, halaman) {
    $ (". Tab_item"). html (&#39;memuatkan ...&#39;);
    $ (this) .addclass (&#39;cur&#39;). Saudara -saudara (). RemoveClass (&#39;cur&#39;);
    loadPagedata (id, halaman);
  }

  // Dengarkan acara tatal $ (&#39;. Tab_item&#39;). Tatal (fungsi () {
    console.log (&#39;tatal ...&#39;, $ (&#39;. Tab_item&#39;). ScrollTop (), $ (&#39;. Tab_item&#39;). InnerHeight ()))
    jika (isloading) {
      kembali;
    }
    // Tentukan sama ada untuk menatal ke jarak bawah 150px beban lebih banyak const scrollTop = $ (this) .scrollTop ();
    const scrollHeight = $ (this) .prop (&#39;scrollHeight&#39;);
    const containerHeight = $ (this) .OUTERHEIGHT ();

    jika (scrollHeight - scrollTop - containerheight <150) {
      // Jarak ke bawah adalah kurang daripada 150px untuk memuat lebih banyak data semasa data;
      jika (currentPage <= total) {
        LoadPageData (kategoriId, CurrentPage);
      }
    }

  });

  // Simulasi fungsi untuk memuatkan data pada fungsi halaman tertentu getData (kategoriId, halaman) {
    Console.log (&#39;getdata ...&#39;, kategoriId, halaman)
    Kembalikan janji baru ((menyelesaikan, menolak) => {
      setTimeout (() => {
        // Secara rawak pulangan data const const = [];
        // kembali 20 keping data setiap kali untuk (var i = 0; i <20; i) {
          list.push ({
            Tajuk: &#39;Kategori:&#39; Kategori &#39;, Tajuk:&#39; I,
            img_url: &#39;https://picsum.photos/200/300?random=&#39; i
          });
        }
        menyelesaikan ({
          Senarai, // Halaman data halaman semasa, // Nombor halaman semasa TotalPages: 100 // Jumlah halaman yang dikembalikan oleh backend});
      }, 1000);
    });
  }

  fungsi loadPagedata (kategoriId, halaman) {
    // Tentukan jika (isloading) {
      kembali;
    }
    isloading = true;
    getData (kategoriId, page) .then (({list, page, totalPages}) => {
      // Jumlah bilangan halaman yang dikemas kini jumlah = totalPages;
      biarkan html = "";
      untuk (var i = 0; i <list.length; i) {
        html = &#39;<div> <img  src = "&#39; list [i] .img_url &#39;" alt="Bagaimana cara menggunakan jQuery untuk melaksanakan tingkap pop timbul, Ajax paging untuk memuatkan data diklasifikasikan tab dan menyelesaikan masalah kekeliruan data?" > <span> "&#39; list [i] .title &#39;"  &#39;;
      }
      $ (". Tab_item"). append (html);
    }). Akhirnya (() => {
      isloading = false;
    });
  }
</script>

</yaya></tirtment>

Kod ini mengelakkan permintaan pendua melalui pembolehubah isloading, dan menggunakan janji untuk mengendalikan operasi tak segerak untuk memastikan pesanan dan ketepatan pemuatan data. Pada masa yang sama, dengan menilai jarak dari bawah dalam acara menatal, pemuatan halaman seterusnya dicetuskan untuk meningkatkan pengalaman pengguna. Harus diingat bahawa dalam aplikasi sebenar, antara muka /jax.php?mod=TAB perlu diganti mengikut keadaan sebenar. Di samping itu, data yang dikembalikan oleh backend hendaklah memasukkan jumlah maklumat halaman supaya frontend dapat menentukan sama ada data halaman seterusnya perlu dimuatkan.

Atas ialah kandungan terperinci Bagaimana cara menggunakan jQuery untuk melaksanakan tingkap pop timbul, Ajax paging untuk memuatkan data diklasifikasikan tab dan menyelesaikan masalah kekeliruan data?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!