Artikel ini bertujuan untuk menyelesaikan masalah yang apabila JavaScript melaksanakan fungsi meningkatkan atau mengurangkan kuantiti keranjang belanja, ia hanya berkuatkuasa pada elemen pertama di halaman. Dengan menganalisis punca kesilapan biasa dan menyediakan penyelesaian pengoptimuman berdasarkan delegasi acara dan Dom Traversal, kami membantu pemaju melaksanakan fungsi kawalan kuantiti keranjang belanja yang mudah digunakan, mudah dan cekap. Pada masa yang sama, kepentingan menulis struktur HTML yang berkesan ditekankan.

Apabila membangunkan halaman membeli -belah atau halaman butiran produk, sering kali perlu melaksanakan fungsi peningkatan atau penurunan kuantiti. Kesalahan yang sama ialah apabila terdapat banyak produk di halaman, kod JavaScript hanya berfungsi untuk produk pertama. Ini biasanya kerana kod hanya memilih elemen pertama dan tidak mengendalikan pelbagai elemen dengan betul. Artikel ini akan meneroka masalah ini dan menyediakan penyelesaian yang lebih cekap dan boleh diguna semula.

Analisis masalah

Kod awal cuba menggunakan QuerySelectorall untuk mendapatkan semua butang, tetapi masih mempunyai masalah. Sebab utama adalah:

1. Masalah pemilih: Menggunakan nama kelas bernombor (seperti .pqt-plus1) menyebabkan kod hanya memilih elemen pertama.
2. Skop Variabel: Pembolehubah bebas dicipta untuk setiap elemen, mengakibatkan kebolehgunaan semula kod yang lemah dan kesukaran dalam penyelenggaraan.

Penyelesaian: Delegasi Acara dan Dom Traversal

Penyelesaian yang lebih elegan ialah menggunakan delegasi acara dan Dom Traversal. Pendekatan ini meningkatkan prestasi dan mengekalkan kod dengan mengelakkan keperluan untuk menambah pendengar acara untuk setiap butang.

Pengoptimuman Struktur HTML:

Pertama, kita perlu mengoptimumkan struktur HTML untuk memanipulasi. Keluarkan akhiran angka dari nama kelas dan gunakan nama kelas generik. Pada masa yang sama, gunakan atribut data untuk menyimpan nilai peningkatan dan penurunan. Dan masalah yang div dalam struktur HTML tidak dapat ditempatkan di tag span telah diperbetulkan.

 <div class="d-flex lign-items-center pls-moins">
  <span class="Count-Number Float-Right">
    <butang jenis="butang" class="btn-sm kiri dec btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="Feather -Minus"> </i> - 
    </butang>
    <span class="cart-button">
      <span class="tambah"> 0 </span>
    </span>
    <butang jenis="butang" class="BTN-SM RIGHT INC BTN BTN-OUTLINE-SECONDARY PQT-PLUS" data-inc="1"> 
      <i class="Feather-Plus"> </i>   
    </butang>
  </span>
</div>

<div class="d-flex lign-items-center pls-moins">
  <span class="Count-Number Float-Right">
    <butang jenis="butang" class="btn-sm kiri dec btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="Feather -Minus"> </i> - 
    </butang>
    <span class="cart-button">
      <span class="tambah"> 0 </span>
    </span>
    <butang jenis="butang" class="BTN-SM RIGHT INC BTN BTN-OUTLINE-SECONDARY PQT-PLUS" data-inc="1"> 
      <i class="Feather-Plus"> </i>   
    </butang>
  </span>
</div>

<div class="d-flex lign-items-center pls-moins">
  <span class="Count-Number Float-Right">
    <butang jenis="butang" class="btn-sm kiri dec btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="Feather -Minus"> </i> - 
    </butang>
    <span class="cart-button">
      <span class="tambah"> 0 </span>
    </span>
    <butang jenis="butang" class="BTN-SM RIGHT INC BTN BTN-OUTLINE-SECONDARY PQT-PLUS" data-inc="1"> 
      <i class="Feather-Plus"> </i>   
    </butang>
  </span>
</div>

<div class="d-flex lign-items-center pls-moins">
  <span class="Count-Number Float-Right">
    <butang jenis="butang" class="btn-sm kiri dec btn btn-outline-secondary pqt-minus" data-inc="-1"> 
      <i class="Feather -Minus"> </i> - 
    </butang>
    <span class="cart-button">
      <span class="tambah"> 0 </span>
    </span>
    <butang jenis="butang" class="BTN-SM RIGHT INC BTN BTN-OUTLINE-SECONDARY PQT-PLUS" data-inc="1"> 
      <i class="Feather-Plus"> </i>   
    </butang>
  </span>
</div>

Kod JavaScript:

 document.QuerySelectorAll (". btn-sm"). foreach (btn => {
  btn.addeventListener ('klik', e => {
    biarkan total = e.target.closest ('.
    total.TextContent = Math.Max ??(0, ParseInt (total.TextContent, 10) ParseInt (e.currentTarget.dataset.inc, 10));
  });
});

Penjelasan kod:

1. document.QuerySelectorAll (". btn-sm"). foreach (btn => {...}); : Pilih semua butang dengan nama kelas .BTN-SM dan tambahkan pendengar acara untuk setiap butang.
2. E.Target.Closest ('. Paling dekat ('.
3. .QuerySelector ('. Ditambah') : Di antara unsur-unsur .pls-moins, cari elemen dengan nama kelas. Tambah yang memaparkan kuantiti.
4. ParseInt (total.TextContent, 10) : Tukar jumlah kandungan teks kepada integer. 10 mewakili perpuluhan.
5. ParseInt (e.currentTarget.dataset.inc, 10) : Dapatkan nilai atribut data-INC pada butang yang diklik dan tukarnya ke integer. E.CurrentTarget menunjuk ke elemen (iaitu butang) yang mana pendengar acara terikat.
6. Math.max (0, ...) : Pastikan kuantiti tidak kurang daripada 0.

Meringkaskan

Dengan menggunakan Delegasi Acara dan Dom Traversal, kita boleh menulis lebih banyak kod JavaScript yang ringkas dan mudah untuk mengendalikan pelbagai elemen. Pendekatan ini bukan sahaja menjadikan kod lebih cekap, tetapi juga menjadikannya lebih mudah untuk diperluaskan dan diubah suai. Ingat, menulis struktur HTML yang sah adalah kunci untuk melaksanakan penyelesaian ini. Elakkan menggunakan nama kelas bernombor dan gunakan nama kelas generik dan atribut data untuk menyimpan maklumat yang relevan. Akhirnya, pastikan struktur HTML anda sah.

Atas ialah kandungan terperinci Penyelesaian kepada kuantiti keranjang belanja JavaScript meningkat dan mengurangkan butang yang hanya berkuat kuasa pada elemen pertama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!