jquery verwirrender Code

Question

Ich lerne Jquery und Javascript anhand von Webbeispielen. Ich habe gute Kenntnisse, aber einige Codes machen mir immer noch zu schaffen. Der folgende Code wird für einen Einkaufswagen verwendet, um die Schaltfläche zum Auschecken auszublenden und durch ein Div zu ersetzen, das eine Nachricht über die Mindestanforderungen an den Warenkorb anzeigt. Es gibt jedoch einen Teil des Codes, der mich stört.

function getCollectionCount() {
  var totalCollectionCount = 0;    
  var collection = $('td[alt*="Collection"]');
  for (var i = 0; i < collection.length; i++) {
    var curVal = $(collection[i]).find("select").val();
    if (curVal != undefined){
      totalCollectionCount += parseInt(curVal);
    }
  }

Was bedeutet dieser Teil?

var collection = $('td[alt*="Collection"]');

Answer 1

td[alt*="Collection"] wählt alle <td> Elemente, deren alt Attribut enthält Collection wie zum Beispiel:

<td alt="Collection"></td>
<td alt="CollectionFoo"></td>
<td alt="BarCollection12324343"></td>

aber nicht

<td></td>
<td alt=""></td>
<td alt="Foo"></td>

---

Nebenbei bemerkt: diese Frage ist ziemlich einfach zu beantworten, indem man die jQuery Selektoren API-Dokumentation :

• Elementwähler
• Attribut-enthält-Selektor

Versuchen Sie bitte, zu recherchieren, bevor Sie fragen!

Answer 2

Dies ist eine jQuery-Attribut-Selektor-Klausel. Sie wählt jede td Element, das ein Attribut namens alt dessen Zeichenfolge den Wert Collection .

Enthält Selektor: http://api.jquery.com/attribute-contains-selector/

jQuery hat eine Reihe von nützlichen Attributselektoren. Hier ist die wichtigste Referenzseite für sie. Sehr lesenswert, wenn Sie gerade erst mit jQuery anfangen

• http://api.jquery.com/category/selectors/attribute-selectors/

Answer 3

Dieser Code gibt jedes td-Element zurück, dessen "alt"-Attribut "Collection" enthält.

http://api.jquery.com/attribute-contains-selector/

jQuery ist voll von diesen komischen Abkürzungen, die zu lernen ewig dauern, so dass ich immer eine Kopie von jQuery in Aktion immer auf meinem Schreibtisch :)

Answer 4

Dieser Code kann einfacher und kürzer wie folgt umgeschrieben werden:

function getCollectionCount() {
    var totalCollectionCount = 0;    
    $('td[alt*="Collection"] select').each(function() {
        var val = this.value || "0";
        totalCollectionCount += parseInt(val, 10);
    });
    return(totalCollectionCount);
}

Und so funktioniert es:

1. Initialisierung von totalCollectionCount auf 0
2. Suche nach allen td-Elementen, die die Zeichenfolge "Collection" im alt-Attribut enthalten, und dann Suche nach ausgewählten Elementen innerhalb dieses td-Elements
3. Iterieren über alle gefundenen Elemente, die die obige Bedingung erfüllen
4. Eine lokale Variable entweder mit dem Wert des Select-Objekts oder mit "0" initialisieren, wenn es keinen Wert gibt oder die Variable leer ist
5. Wandeln Sie diesen Wert in eine Zahl um (Sie müssen parseInt das Radix übergeben, damit es nicht raten kann) und addieren Sie ihn zur bisherigen Zwischensumme.
6. die gefundene Summe zurückgeben.