javascript - 为什么我的 $().css({ "visibility": "visible"}) working?

Question

我似乎无法获得我的 jquery <div id="NotificationDotOnNav" > {{NotificationNavDot}} </div>功能正常工作!

在下面找到帮助文件:

<template name="home">
    <div id="NotificationDotOnNav" > {{NotificationNavDot}} </div>
</template>

在下面找到我的帮助文件:

Template.home.helpers({

  'NotificationNavDot': function () {

     var numberOfNotifications = recipientsDetails.find({counts:1}).count();

     if (numberOfNotifications > 0) {

           $("#NotificationDotOnNav").css({ "visibility": "visible"});
           alert("Testing!");

           return;
        }

     else { 

           $("#NotificationDotOnNav").css({ "visibility": "hidden"});       

        }           

     },
});

运行时，会弹出一个 Testing!显示，明确表示流量实际上进入了if (numberOfNotifications > 0) ，但是 $("#NotificationDotOnNav").css({ "visibility": "visible"});无法启动!

我觉得很奇怪的是，当复制粘贴并运行时:$("#NotificationDotOnNav").css({ "visibility": "visible"});在浏览器控制台中，它有效!

有人可以解释一下为什么它只在浏览器控制台中运行时才会启动，否则不会启动吗？也请帮助我让这个简单的代码工作。

我已经包含了相关的 CSS 文件，以防有帮助

#NotificationDotOnNav{
top: 10px;
float: right;
right: 5%; 
visibility: hidden;
position: absolute;
z-index: 5;
min-width: 10px;
padding: 7px 7px;
border-radius: 20px;
background-color: #f54555ad; 
}

期待您的帮助!

Answer 1

确保您的辅助函数在文档对象模型 (DOM) 准备就绪并可以安全操作后执行(这可能是您的代码在开发控制台中键入时运行但在运行 js 时不运行的原因)。

您可以为此使用 $( document ).ready( handler ) ( doc )。

请考虑一个最小的可重现示例，以便我们帮助您了解更多详细信息。

顺便说一句，您还可以通过缓存选择器并使用三元来更简洁地编写代码来改进您的代码:

...
const numberOfNotifications = recipientsDetails.find({counts:1}).count();
const elm = $("#NotificationDotOnNav") // query the DOM just once
numberOfNotifications > 0 ? elm.show() : elm.hide()

...