jquery混淆代码答案

【问题标题】：jquery confusing codejquery混淆代码
【发布时间】：2011-09-25 16:27:17
【问题描述】：

我正在从 Web 示例中学习 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"]');

【问题讨论】：

也许 jquery 文档是个不错的地方：api.jquery.com/attribute-contains-selector
这是一个有用的网站：SelectOracle。该站点的布局非常混乱，但想法是您清除“直接输入”文本区域，输入 CSS 选择器，然后单击“解释这个”按钮 - 有点隐藏在页面下方。

标签： javascript jquery cart shopping

【解决方案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 轻松回答：

请在询问之前尝试研究！

【讨论】：

我会注意到，从风格上讲，使用“alt”属性值作为驱动 JavaScript 逻辑的东西有点不稳定或“代码异味”。另外，您确定“*=”表示“开始于”而不仅仅是“包含”吗？就我个人而言，我永远记不起那样的事情。
谢谢你我从来没有想过，但它确实有道理。所以我可以根据它的属性选择任何特定元素吗？如div[alt*="test1"]会选择所有<div>属性为test1的元素
@Pointy 那么你推荐什么而不是使用alt 属性？
看了你的回答后你是对的我只是被这一部分难住了。如果问题简单得令人讨厌，我深表歉意，但感谢大家的回复。
好吧，“alt”属性将包含描述图像的用户导向消息，以防由于某种原因无法显示。该消息可能会被翻译成另一种语言，或者可能出于文体原因而改变，因此使用代码中的“alt”值是一种“脆弱”结构。还有其他可以并且应该用于控制 JavaScript 的属性——例如“类”和 HTML5“数据-whatever”属性系列。

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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

jQuery 充满了这些花时间学习的时髦快捷方式，所以我总是在我的办公桌上保留一份 jQuery in action 的副本 :)

【讨论】：

【解决方案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 元素
遍历所有找到的符合上述条件的元素
使用选择对象的值初始化局部变量，如果没有值或为空，则为“0”
将该值转换为一个数字（必须将基数传递给 parseInt，这样它就不会猜测）并将其添加到小计中。
返回我们找到的总数。

【讨论】：