jquery - 使用 jQuery 将数字更改为单词

Question

我有一个由 CMS 生成的编号(库存编号)，用于显示库存中剩余的商品数量。我想将数字更改为“有货”或“缺货”，具体取决于它是否等于或大于零。

我有这个代码片段，但由于某种原因，它会将数字更改为“有库存”，无论它是什么 - 所以即使它是“0”，它也会显示“有库存”。

显然我做错了什么，因为在这个片段中它甚至改变了模块示例，这甚至不是一个数字......

var number = $(".productStock").text();

$(document).ready(function() {
  if (number == "0") {
    $(".productStock").text('Out of stock')
  } else {
    $(".productStock").text('In stock')
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li class="productStock">{tag_instock}</li> <!--this is the module-->
  <li class="productStock">0</li> <!--I want this to say 'Out of stock'-->
  <li class="productStock">45</li> <!--I want this to say 'In stock'-->
</ul>

Answer 1

您遇到的问题是您只查看第一个 .productStock 元素(也在 document.ready 处理程序之外，但这是另一个问题)。您需要循环遍历它们并单独检查它们的值。

为此，您可以向 text() 方法提供一个函数，该函数返回要根据当前值设置的新值，如下所示:

$(function() {
  $(".productStock").text(function(i, t) {
    return t == "0" ? 'Out of stock' : 'In stock';
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
  <li class="productStock">{tag_instock}</li>
  <li class="productStock">0</li>
  <li class="productStock">45</li>
</ul>