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