Измените число на слово, используя 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>

Answer 2

Здесь нам нужно пройти li, Так что, если мы хотим использовать тот же класс .productStock его хорошо использовать each(function(){})Используйте эту скрипку:

JS:

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