如果元素的内容等于指定值，则将该类添加到元素

Question

如果元素为空或者值为零，我试图添加一个类。

HTML是由我使用的平台生成的，如果不使用脚本就无法调整，因此我只能使用JavaScript / jQuery和CSS进行调整。

这是我所拥有的，而我却无法得到它。

HTML

<div class="Widget1001783 WidgetType23 microCart" id="w1001783_pnlDefaultBody">
    <table width="100%">
        <tbody>
            <tr id="w1001783_trHeader">
                <th colspan="2"> <span class="FormLabel" id="w1001783_lblCart">shopping cart</span> </th>
            </tr>
            <tr id="w1001783_trItems">
                <td><span class="FormLabel" id="w1001783_lblItems">items:</span></td>
                <td align="right"><span class="FormLabel" id="w1001783_lbdItems">0</span></td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.microCart tr:nth-of-type(2) td:last-child::after {
   content: "♣";
}

.microCart.emptyCart tr:nth-of-type(2) td:last-child,
.emptyCart *::after {
    content:"";
    display:none;
}

的jQuery

$(document).ready(function() {
      if ($(".microCart tr:nth-of-type(2) td:last-child span").html("0"))
           $(".microCart").addClass("emptyCart");
      else ($(".microCart").removeClass("emptyCart"));
});

Answer 1

您必须在没有参数的情况下调用html()方法，然后将结果与"0"进行比较。事实上，如果要获取元素的文本内容，则应使用text()方法。如果此元素中有一些空格，您还应该trim()结果。

$(document).ready(function() {
  const value = $(".microCart tr:nth-of-type(2) td:last-child span").text().trim()
  if (value === "0" || value === "") {
    $(".microCart").addClass("emptyCart");
  } else {
    $(".microCart").removeClass("emptyCart");
  }
});

请参阅jQuery docs on text() method。

Answer 2

如果您将任何内容传递给rank函数 - 那么它会将其设置为元素的内部html - see documentation。因此，在您的示例中，您不是将元素的html与0进行比较，而是将节点的html值设置为它。这就是为什么它不能按预期工作的原因。

大多数情况下，所有这些都需要修复。

另一方面，html()的使用效果更好，因为您对元素中的所有可能标记不感兴趣。示例如下。

text()

function updateClass() {
  var $cart = $(".microCart");
  var text = $cart.find("tr:nth-of-type(2) td:last-child span").text().trim();
  if ((text == "0") || !text.length)
      $cart.addClass("emptyCart");
  else 
      $cart.removeClass("emptyCart");
}

.microCart tr:nth-of-type(2) td:last-child::after {
   content: "♣";
}

.microCart.emptyCart tr:nth-of-type(2) td:last-child,
.emptyCart *::after {
    content:"";
    display:none;
}

Answer 3

将if条件更改为：

if ($(".microCart tr:nth-of-type(2) td:last-child span").html().localeCompare("")==0 || 
$(".microCart tr:nth-of-type(2) td:last-child span").html().localeCompare("0")==0)

$("selector").html("string")将innerHTML属性设置为"string"。