Artikel ini bertujuan untuk menyelesaikan masalah bahawa kuantiti keranjang belanja JavaScript meningkat dan mengurangkan fungsi hanya berkuatkuasa pada elemen pertama pada halaman. Dengan menganalisis penyebab kesilapan biasa dan menyediakan penyelesaian pengoptimuman menggunakan atribut DOM Traversal dan data, kami membantu pemaju melaksanakan fungsi kawalan kuantiti keranjang belanja yang mudah digunakan, mudah dan cekap. Pada masa yang sama, artikel ini juga menunjukkan struktur tidak sah dalam kod HTML yang asal dan memberikan cadangan untuk pembetulan.

Apabila menggunakan JavaScript untuk membangunkan gerai belanja atau komponen lain yang memerlukan kawalan dinamik kuantiti, pemaju sering menghadapi masalah: Kod hanya berkuatkuasa pada elemen pertama pada halaman, tetapi tidak pada unsur -unsur berulang berikutnya. Masalah ini biasanya berpunca daripada penggunaan yang tidak betul dari kaedah QuerySelector dan QuerySelectorall, dan cara pendengar acara terikat.

Analisis masalah

Kod asal menggunakan QuerySelector untuk mendapatkan elemen halaman, yang hanya akan mengembalikan elemen pertama yang sepadan dengan pemilih. Walaupun QuerySelectorall digunakan, kod berikutnya masih mensasarkan elemen pertama yang diperoleh melalui QuerySelector, mengakibatkan unsur -unsur berikutnya tidak dapat bertindak balas terhadap peristiwa. Di samping itu, menulis fungsi pengendalian acara berasingan bagi setiap elemen akan menyebabkan redundansi kod dan tidak kondusif untuk penyelenggaraan.

Penyelesaian: Leverage Dom Traversal dan atribut data

Penyelesaian yang lebih elegan dan diselenggarakan adalah menggunakan atribut DOM Traversal dan data untuk memusnahkan logik pengendalian peristiwa dari contoh elemen tertentu.

1. Nama kelas bersatu: Gunakan nama kelas yang sama untuk semua elemen yang memerlukan fungsi yang sama. Sebagai contoh, semua butang "ditambah" diberikan nama kelas PQT-Plus, semua butang "tolak" diberikan nama kelas PQT-Minus, unsur-unsur yang digunakan untuk memaparkan kuantiti diberikan nama kelas tambahan, dan div yang mengandungi keseluruhan kawasan kawalan kuantiti diberikan nama kelas PLS-Moins.

2. DOM Traversal: Dalam fungsi pengendalian acara, gunakan kaedah e.target.closest () untuk mencari elemen ibu bapa yang terdekat (contohnya, div yang mengandungi keseluruhan kawasan kawalan kuantiti), dan kemudian gunakan QuerySelector () untuk mencari elemen yang perlu dikendalikan dalam julat elemen parent (contohnya, span yang membuang kuantiti).

3. Atribut data: Gunakan atribut data-* untuk menyimpan maklumat tambahan mengenai elemen HTML. Sebagai contoh, anda boleh menetapkan data-inc = "1" pada butang "plus" dan data-inc = "-1" pada butang "tolak" untuk mewakili kenaikan kuantiti.

Contoh kod

Berikut adalah kod sampel menggunakan Dom Traversal dan atribut data:

 <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>

 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));
  });
});

Kod ini mula-mula memilih semua elemen dengan nama kelas BTN-SM, dan kemudian menambah pendengar acara klik ke setiap elemen. Dalam fungsi pengendali acara, E.Target menunjuk ke elemen yang mencetuskan peristiwa (iaitu, butang yang diklik). e.target.closest ('. QuerySelector ('. Ditambah') mendapati bilangan elemen span yang dipaparkan dalam skop elemen induk. Akhirnya, dapatkan nilai atribut data-inci pada butang melalui e.currenttarget.dataset.inc dan kemas kini kuantiti. Math.max (0, ...) memastikan bahawa kuantiti tidak akan kurang daripada 0.

Pertimbangan Struktur HTML

Terdapat struktur HTML yang tidak sah dalam kod asal: elemen Div tidak boleh diletakkan terus di dalam elemen span. Div harus digantikan dengan rentang atau elemen lain yang sesuai untuk memastikan HTML yang sah. Dalam kod sampel di atas, elemen div yang mengandungi kuantiti telah digantikan dengan elemen span.

Meringkaskan

Dengan menggunakan atribut DOM Traversal dan data, anda boleh menulis kod JavaScript yang lebih mudah dan lebih mudah untuk mencapai fungsi kawalan kuantiti keranjang belanja yang boleh diguna semula. Elakkan menggunakan QuerySelector untuk secara langsung memilih beberapa elemen pendua. Sebaliknya, gunakan delegasi acara dan Dom Traversal untuk mengendalikan elemen yang berkaitan. Pada masa yang sama, perhatikan kesahihan struktur HTML dan elakkan bersarang tidak sah. Kaedah ini bukan sahaja dapat menyelesaikan masalah bahawa kuantiti keranjang membeli -belah meningkatkan atau mengurangkan fungsi hanya berkuatkuasa pada elemen pertama, tetapi juga boleh digunakan untuk senario lain yang memerlukan kawalan dinamik elemen halaman.

Atas ialah kandungan terperinci JavaScript Shopping Cart Kuantiti Peningkatan dan Pengurangan Fungsi: Selesaikan masalah hanya berkuat kuasa pada elemen pertama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!