Javascript 如果元素的内容等于指定值，则向元素添加类

我试图在元素为空或值为零时添加一个类

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

这是我所拥有的，我只是不太明白

HTML jQuery 您必须在没有参数的情况下调用html方法，然后将结果与0进行比较。事实上，如果你想得到一个元素的文本内容，你应该使用text方法。如果此元素中有空格，还应修剪结果

$(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");
  }
});

请参阅。

您必须调用不带参数的html方法，然后将结果与0进行比较。事实上，如果你想得到一个元素的文本内容，你应该使用text方法。如果此元素中有空格，还应修剪结果

$(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");
  }
});

---

请参阅。

将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.htmlstring将innerHTML属性设置为string。

将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.htmlstring将innerHTML属性设置为string。

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

大多数情况下，这就是需要解决的问题

另一件事是文本的使用更好，因为您对元素中所有可能的标记都不感兴趣。下面是一个例子

函数更新类{ var$cart=$.microCart； var text=$cart.findtr:nth-of-type2 td:last-child span.text.trim； 如果text==0 | |！text.length $cart.addClassemptyCart； 其他的 $cart.removeClassemptyCart； } .microCart tr:nth-of-type2 td:最后一个子项：：之后{ 内容：♣; } .microCart.emptyCart tr:nth-of-type2 td:最后一个孩子， .emptyCart*：：之后{ 内容：； 显示：无； } 购物车 项目： 0 如果您将任何内容传递给html函数，那么它会将其设置为元素的内部html。因此，在您的示例中，您没有将元素的html与0进行比较，而是将节点的html值设置为0。这就是为什么它不能像你期望的那样工作

大多数情况下，这就是需要解决的问题

另一件事是文本的使用更好，因为您对元素中所有可能的标记都不感兴趣。下面是一个例子

函数更新类{ var$cart=$.microCart； var text=$cart.findtr:nth-of-type2 td:last-child span.text.trim； 如果text==0 | |！text.length $cart.addClassemptyCart； 其他的 $cart.removeClassemptyCart； } .microCart tr:nth-of-type2 td:最后一个子项：：之后{ 内容：♣; } .microCart.emptyCart tr:nth-of-type2 td:最后一个孩子， .emptyCart*：：之后{ 内容：； 显示：无； } 购物车 项目： 0

---

为什么我们经常看到这种混乱？在任何jQuery文档或教程中都没有任何东西表明使用参数调用函数可以执行比较。您从哪里得到的印象是.html0是测试HTML是否为0的方法？@Barmar不幸的是，人们倾向于尝试一些随机的事情，如果它不起作用，他们宁愿在堆栈溢出时打扰人们，而不是阅读文档。@Gothdo我明白，但新手似乎都碰到了同样的随机事件。为什么我们经常看到这种混乱？在任何jQuery文档或教程中都没有任何东西表明使用参数调用函数可以执行比较。您从哪里得到的印象是.html0是测试HTML是否为0的方法？@Barmar不幸的是，人们倾向于尝试一些随机的事情，如果它不起作用，他们宁愿在堆栈溢出时打扰人们，而不是阅读文档。@Gothdo我明白，但新手似乎都碰到了同样的随机事件。@AndreyTserkus我添加了一个空白文本检查。始终使用严格的比较运算符被认为是一种很好的编码实践。@AndreyTserkus我添加了一个空白文本检查。始终使用严格的比较运算符被认为是一种良好的编码实践。

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)