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()

...

Answer 2

像这样尝试：

Template.home.helpers({

 'NotificationNavDot': function () {

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

     if (numberOfNotifications > 0) {
        $("#NotificationDotOnNav").css('opacity', '1');
        alert("Testing!");
        return;
     } else { 
       $("#NotificationDotOnNav").css('opacity', '0');       
     }           
 }
});

还要更改您的CSS代码：

#NotificationDotOnNav {
 top: 10px;
 float: right;
 right: 5%; 
 opacity: 0;  /* this has been changed */ 
 position: absolute;
 z-index: 5;
 min-width: 10px;
 padding: 7px 7px;
 border-radius: 20px;
 background-color: #f54555ad; 
}

Answer 3

我找到了解决该问题的方法。

在下面找到为使代码正常工作而进行的更改。

以下是我对HTML代码所做的更新：

<template name="home">
    <span id="NotificationDotOnNav" class="badge animated"> {{NotificationNavDot}} </span>
</template>

在我的帮助文件下找到：

Template.home.helpers({

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

        if (numberOfNotifications > 0 ) {

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

               return 0;
            }

        else {  

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

            }           

    }

});

在我的CSS下方找到：

#NotificationDotOnNav{
top: 11px;
float: right;
right: 10%;
height: 13px;
width: 1px;
position: fixed;
visibility: hidden;
z-index: 9;
font-size: xx-small;
color: #f5455500;
background-color: #f54555b5;    
}

尽管如此，我还是要感谢大家的贡献。

为什么我的$（）。css（{“ visibility”：“ visible”}）无法正常工作？

3 个答案: