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"]选择<td>属性包含alt的所有Collection个元素，例如：

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

但不是

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

旁注：这是一个非常基本的问题，可以通过阅读jQuery selectors API documentation轻松回答：

在你问之前请先尝试研究！

Answer 2

这是一个jQuery属性selector子句。它正在选择任何td元素，该元素具有名为alt的atrtibute，其字符串包含值Collection。

包含选择器：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);
}

而且，这是它的工作原理：

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

jquery令人困惑的代码

4 个答案: