jQuery realisiert die volle Funktion des Einkaufswagens

In diesem Artikel wird der spezifische Code von jQuery zur Realisierung der vollständigen Funktion des Einkaufswagens zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Effektbild:

HTML und CSS:

<!DOCTYPE html>
<html lang="de">

<Kopf>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
 <title>Dokument</title>
 <script src="../jquery-3.4.1.min.js"></script>
 <Stil>
  * {
   Rand: 0;
   Polsterung: 0;
  }
  
  .tab {
   Breite: 500px;
   Rahmen-Zusammenbruch: Zusammenbruch;
   Rand: 0 automatisch;
  }
  
  .tab td,
  das {
   Rand: 1px durchgezogen #000;
  }
  
  .tab .num {
   Breite: 20px;
  }
  
  .tab .add,
  .unter {
   Breite: 20px;
  }
  
  .aktuell {
   Hintergrundfarbe: rosa;
  }
 </Stil>
</Kopf>

<Text>
 <Tabellenklasse="Tabulator">
  <Kopf>
   <th>Alles auswählen<input type="checkbox" name="" value="" class="checkAll">
    <Eingabetyp="Kontrollkästchen" Name="" Wert="" Klasse="Allesprüfen">
   </th>
   <th>Produktname</th>
   <th>Stückpreis</th>
   <th>Menge</th>
   <th>Zwischensumme</th>
   <th>Betrieb</th>
  </thead>
  <tbody>
   <tr>
    <td><input Typ="Kontrollkästchen" Klasse="ed" /></td>
    <td>Computer</td>
    <td class="Preis">￥200,20</td>
    <td>
     <button Typ="button" Klasse="sub">-</button>
     <Eingabetyp="Text" Name="" Wert="1" Klasse="Nummer">
     <button Typ="button" Klasse="Hinzufügen">+</button>
    </td>
    <td class="small_total">￥200,20</td>
    <td class="delete">Löschen</td>
   </tr>
   <tr>
    <td><input Typ="Kontrollkästchen" Klasse="ed" /></td>
    <td>Mobiltelefon</td>
    <td class="Preis">￥100,30</td>
    <td>
     <button Typ="button" Klasse="sub">-</button>
     <Eingabetyp="Text" Name="" Wert="1" Klasse="Nummer">
     <button Typ="button" Klasse="Hinzufügen">+</button>
    </td>
    <td class="small_total">￥100,30</td>
    <td class="delete">Löschen</td>
   </tr>
   <tr>
    <td><input Typ="Kontrollkästchen" Klasse="ed" /></td>
    <td>Klimaanlage</td>
    <td class="Preis">￥1000,99</td>
    <td>
     <button Typ="button" Klasse="sub">-</button>
     <Eingabetyp="Text" Name="" Wert="1" Klasse="Nummer">
     <button Typ="button" Klasse="Hinzufügen">+</button>
    </td>
    <td class="small_total">￥1000,99</td>
    <td class="delete">Löschen</td>
   </tr>
  </tbody>
 </Tabelle>
 <div>
  <span><span style="color: red;" class="num_sum">1</span> Artikel ausgewählt</span>
  <span>Gesamt:</span>
  <span class="sum" style="color: red;">0</span>
  <div><span style="color: red;" class="delSome">Das ausgewählte Produkt löschen</span>
   <span style="color: red;" class="delAll">Einkaufswagen leeren</span>
  </div>
 </div>
 </body>

</html>

JS:

//Der ausgewählte Status der drei kleinen Kontrollkästchen im Inneren folgt dem „Alles auswählen“-Button //Da „aktiviert“ eine inhärente Eigenschaft des Kontrollkästchens ist, verwenden Sie prop(), um diese Eigenschaft abzurufen und festzulegen $(function() {
   getSum();
   $(".checkAll").ändern(Funktion() {
     // console.log($(this).prop("checked"));//Der Status der Schaltfläche „Alles auswählen“$(".ed,.checkAll").prop("checked", $(this).prop("checked"));
     getSum();
     wenn ($(".ed,.checkAll").prop("checked")) {
      //Wenn alle ausgewählt sind, fügen Sie allen Produkten den Klassennamen (Hintergrundfarbe) hinzu
      $(".tab tbody").children().addClass("aktuell");
     } anders {
      $(".tab tbody").children().removeClass("aktuell");
     }
    })
    //Wenn alle kleinen Schaltflächen ausgewählt sind, wird die Schaltfläche „Alles auswählen“ ausgewählt. Wenn die kleinen Schaltflächen nicht ausgewählt sind, wird die Schaltfläche „Alles auswählen“ nicht ausgewählt. //: aktivierter Selektor, finde das ausgewählte Formularelement $(".ed").change(function() {
    // console.log($(".ed:checked").length);//Anzahl der aktivierten kleinen Kontrollkästchen// console.log($(".ed").length);
    //Konsole.log($(this).prop("geprüft"));
    wenn ($(".ed:checked").Länge === $(".ed").Länge) {
     $(".checkAll").prop("geprüft", true);
    } anders {
     $(".checkAll").prop("geprüft", false);
    }
    getSum();
    wenn ($(this).prop("geprüft")) {
     $(diese).parents("tr").addClass("aktuell");
    } anders {
     $(diese).parents("tr").removeClass("aktuell");
    }
   })

   $(".add").klick(function() {
    lass n = parseInt($(this).siblings(".num").val());
    //Konsole.log(n);
    n++;
    $(diese).geschwister(".num").val(n);
    lass Preis = $(this).parent().siblings(".price").html();
    Preis = Preis.substr(1);
    //Konsole.log(Preis);
    $(this).parent().siblings(".small_total").text("￥" + (n * Preis).toFixed(2));
    getSum();
   })
   $(".sub").klick(Funktion() {
     lass n = parseInt($(this).siblings(".num").val());
     //Konsole.log(n);
     wenn (n === 1) {
      gibt false zurück;
     }
     N--;
     $(diese).geschwister(".num").val(n);
     lass Preis = $(this).parent().siblings(".price").html();
     Preis = Preis.substr(1);
     //Konsole.log(Preis);
     $(this).parent().siblings(".small_total").text("￥" + (n * Preis).toFixed(2));
     getSum();
    })
    //Benutzer können den Wert auch direkt in der Form num ändern (kleiner Fehler) und die Zwischensumme auf die gleiche Weise berechnen$(".num").change(function() {
    lass n = $(this).val();
    lass Preis = $(this).parent().siblings(".price").html();
    Preis = Preis.substr(1);
    $(this).parent().siblings(".small_total").text("￥" + (n * Preis).toFixed(2));
    getSum();
   })

   Funktion getSum() {
    let count = 0; //Gesamtzahl der Artikel berechnen let money = 0; //Gesamtpreis berechnen $(".num").each(function(index) {
     wenn ($(".ed").eq(index).prop("checked") == true) {
      Anzahl += parseInt($(".num").eq(index).val());
      Geld += parseFloat($(".small_total").eq(index).text().substr(1));
     }
    })
    $(".num_sum").html(Anzahl);
    $(".sum").html(Geld.toFixed(2));
   }

   //Produktmodul löschen //Klicken Sie auf Löschen, um das aktuelle Produkt zu löschen. Beginnen Sie also mit $(this) $(".delete").click(function() {
     //Das aktuelle Element löschen$(this).parent().remove();
     $(".ed").ändern();
     getSum();
     clearCheckAll();
    })
    //Ausgewähltes Produkt löschen: Wenn das kleine Kontrollkästchen aktiviert ist, lösche das entsprechende Produkt $(".delSome").click(function() {
     //Ausgewähltes Element löschen$(".ed:checked").parent().parent().remove();
     getSum();
     clearCheckAll();
    })
    // Einkaufswagen leeren $(".delAll").click(function() {
    $(".tab tbody").empty();
    getSum();
    clearCheckAll();
   })

   Funktion „Alles löschen“ () {
    wenn ($(".tab tbody")[0].innerText == '') {
     $(".checkAll").prop("geprüft", false);
    }
   }
})

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:

Implementierung eines Einkaufswagens mit jQuery
jQuery implementiert die Grundfunktionen des Warenkorbs
jQuery implementiert die Gesamtpreisberechnungs- und Gesamtpreisübertragungsfunktion des Warenkorbs
jQuery implementiert alle Warenkorbfunktionen

<<: jQuery implementiert Akkordeoneffekte

>>: js-Methode zum Löschen eines Felds in einem Objekt