使用 JQuery 当 Content == “0” 时隐藏 Div？

Question

尝试编写一个检查 div 内容的脚本，如果该内容恰好为 0，则它会隐藏 div。 这适用于收件箱系统，以便计数仅在您有新消息时显示。 这是我写的：

 var count = $('.count').val(); if (count == '0') { $('.count').hide(); } else { $('.count').show(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href='index.php?act=UserCP&CODE=alerts'> <span class="count"><.-- |new_alerts| --></span> alerts</a> <a href='index?php?act=Msg&CODE=01'> <span class="count"><!-- |new_msg| --></span> inbox</a>

发生问题的站点。

<!--|new_msg| --> <!--|new_msg| -->是托管站点的用户菜单系统的一部分。 在网站上，它会变成一个数字，与您有多少新警报或新消息相关。 这是原因吗？ div 在网站上有一个实际的数字，所以它应该读对吗？

Answer 1

我还没弄清楚为什么，但让 class 选择器工作的运气为零。 尝试在元素上设置一个 id。 接着...

var count = $(document).getElementById("#countId").textContent;
if (count == '0') { 
    $(document).getElementById("#countId").style.display = 'none'; 
} 
else { 
    $(document).getElementById("#countId").style.display = ''; 
}

Answer 2

如果您有多个.count元素，这正是count变量将返回的内容^{[参见下一个代码]} .. 并且肯定它根本不会匹配0

 $(document).ready(function(){ var count = $(".count").text().trim(); console.log(count); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="count">0</span> <span class="count">1</span> <span class="count">2</span>

正确的方法是使用.each甚至.filter .count

 $(document).ready(function(){ $(".count").show(0).filter(function(){ return $(this).text().trim() == 0; }).hide(0); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <span class="count">0</span> <span class="count">1</span> <span class="count">2</span>