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()方法提供一个函数，该函数返回基于其当前值设置的新值，如下所示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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')
        }
      });      
   });

使用jQuery

2 个答案: