使用 jQuery 将数字更改为单词

Question

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

我有这个 sn-p，但由于某种原因，无论它是什么，它都会将数字更改为“有货” - 所以即使它是“0”，它也会显示“有货”。

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

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>

Answer 2

这里我们需要遍历li。所以如果我们想使用同一个类.productStock 最好使用each(function(){}) 使用这个fiddle：

JS：

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