jquery 令人困惑的代码

Question

我正在从网络示例中学习 Jquery 和 Javascript。我有很好的工作知识，但有些代码仍然让我困惑。以下代码用于购物车，以隐藏结帐按钮并替换为显示有关最低购物车要求的消息的 div。不过，有一部分代码让我失望。

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

这部分的意思是什么？

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

Answer 1

td[alt*="Collection"] 选择 alt 属性包含 Collection 的所有 元素，例如：

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

但不是

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

---

旁注：这是一个非常基本的问题，可以通过阅读 jQuery 选择器轻松回答API文档：

• 元素选择器
• 属性包含选择器

请在提问之前先尝试研究一下！

Answer 2

这是一个 jQuery 属性选择器子句。它选择任何具有名为 alt 且字符串包含值 Collection 的属性的 td 元素。

包含选择器： http://api.jquery.com/attribute-contains-selector/

jQuery 有许多有用的属性选择器。这是他们的主要参考页面。如果您刚刚开始使用 jQuery，那么非常值得一读

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

Answer 3

该代码返回“alt”属性包含“Collection”的每个 td 元素。

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

jQuery 是充满了这些需要永远学习的时髦快捷方式，所以我总是保留一份jQuery in action任何时候我的办公桌:)

Answer 4

可以像这样更简单和简短地重写此代码：

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

并且，这就是它的工作原理：

1. 将totalCollectionCount初始化为0
2. 查找所有在alt属性中具有字符串“Collection”的td元素，然后查找该td中的选择元素
3. 迭代所有 元素找到与上述条件匹配的元素
4. 使用选择对象的值初始化局部变量，如果没有值或为空，则使用“0”
5. 将该值转换为数字（必须将基数传递给 parseInt所以它不会猜测）并将其添加到到目前为止的小计中。
6. 返回我们找到的总数。