Question

我正在尝试添加消息＆＃34;产品缺货＆＃34;如果产品的库存等于零，则显示带有jQuery的产品布局。我现在的代码将显示我想要的消息，如果我使用双等==比较，但如果我使用完全相等的比较===则不会。我在代码中错误地做了什么导致这种情况发生？通过==比较，我的代码也会将消息添加到"N/A"项<li id="stock"></li>中的任何产品中，这不是预期的。

HTML：

<ul class="nobullet" id="product-info">
    <li id="stock" style="display:none;">0</li>
    <li id="stockMessage"></li>
</ul>

jQuery的：

var stockAmount = $("#stock").text();

if (stockAmount == 0){
    $("#stockMessage").html("<span style='color:red;'>Product is out of stock.</span>");
}

实况网页：http://www.redlakewalleye.com/main-menu/walleye-1/walleye-cheeks-fresh-frozen

Answer 1

jQuery函数.text()返回一个字符串。您正在使用以下代码将字符串与数字进行比较：

stockAmount == 0

因此需要进行类型转换。 ==运算符会自动执行此操作，但===运算符将失败，因为它不进行类型转换。

关于==的{{3}}：

如果操作数不是同一类型，则等于运算符会转换操作数，然后应用严格比较。如果操作数是数字或布尔值，操作数将尽可能转换为数字;否则，如果任一操作数是字符串，则尽可能将字符串操作数转换为数字。如果两个操作数都是对象，那么JavaScript会比较内部引用，当操作数引用内存中的同一个对象时，它们是相等的。

===：

如果操作数严格相等（见上文）且没有类型转换，则identity运算符返回true。

如果您想使用===运算符，可以先使用类似如下的代码将元素文本解析为整数：

var stockAmount = parseInt($("#stock").text(), 10);

if (stockAmount === 0){
    //...
}

Answer 2

首先，不要注释一个元素，其文本应该由JS检索（jQuery）使用任何其他方法隐藏它。

var stockAmount = +$("#stock").text(); // "0" // Yey it works now!!
               // ^---- unary + to convert to Number

if (!stockAmount){ // or use: stockAmount === 0 
    $("#stockMessage").html("<span style='color:red;'>Product is out of stock.</span>");
}

我不会涵盖关于 What's the difference between == and === 的主题，因为它已经在Goog和SO上得到了解答。

如果列表项的内容等于零，则添加消息

2 个答案: