.append 中带有三元 `:?` 运算符的 jQuery 错误？

Posted 2023-03-11

【中文标题】.append 中带有三元 `:?` 运算符的 jQuery 错误？

【英文标题】：jQuery bug in .append with ternary `:?` operators?

【发布时间】：2017-01-21 09:13:54

【问题描述】：

使用

var states = 
    Abbreviation: "AR",
    Name: "Arkansas"

为什么会这样。

$.each(states, function ()  
               var o = 
                    value: this.Abbreviation,
                    text: this.Name
                

                if (this.Abbreviation === "AR")  //hardcoded for you pleasure
                    o.selected = 'selected';
                

                e.append(
                    $('<option/>', o)
                );    
            );

但不是这个：

$.each(states, function ()  
                e.append(                        
                    $('<option/>', 
                        value: this.Abbreviation,
                        text: this.Name,
                        selected: (this.Abbreviation === csc.statesDDL.txt().val() ? 'selected' : '')
                    )
                );    
            );

对于三元 :? 运算符，jquery 中的 .append 是否有限制？

注意：我记录了 if 语句的输出，当运行注释掉的代码时，它显示所有选项都被选中，日志输出只有 1 个选项 = true。未提交的代码按预期运行。

【问题讨论】：

“有限制吗” ...没有。提供足够的代码来重现此问题。就目前而言，您没有minimal reproducible example 可供任何人提供帮助

我猜你可能没有注意到，在第一个示例中将selected: "" 添加到对象字面量后，当条件失败时，它的行为就像第二个一样。 undefined 和 "" 的值是不同的。

关于你的更新，$.each 回调中的this 是对当前迭代值的引用，所以this.Abbreviation 将是undefined，所以你的条件失败了，第一个示例为selected 获取undefined，第二个获取""，如上所述，它们是不同的值。

另外，如果你更正它以这样做：this === csc.statesDDL.txt().val()，如果你不是在严格模式下它仍然会失败，因为 JS 将原语变成了一个对象。 jQuery 使用this 引用当前项目的非典型行为并不是很好，IMO。而是为回调定义参数，并使用这些参数。

【参考方案1】：

问题不是三进制，而是jQuery/html 处理空字符串的方式。 jQuery 很可能不会将该属性解析为显式 false 并因此创建一个带有 "selected=''" 的元素，浏览器可能会将其解释为 "selected" 我相信这是来自旧的 HTML 标准，该标准将其识别为被选中。如果您将错误设为显式，它将起作用：

selected: (this.Abbreviation === csc.statesDDL.txt().val() ? 'selected' : false)

【讨论】：

谢谢，下次会尝试更好地提出我的问题。

【参考方案2】：

我猜它没有评估它

((this.Abbreviation === csc.statesDDL.txt().val()) ? 'selected' : '')

但将其评估为

(this.Abbreviation === (csc.statesDDL.txt().val() ? 'selected' : ''))

【讨论】：

等式比较运算符的优先级高于条件运算符。