为什么我的 $().css({ "visibility": "visible"}) 不起作用？答案

【问题标题】：Why isnt my $().css({ "visibility": "visible"}) working?为什么我的 $().css({ "visibility": "visible"}) 不起作用？
【发布时间】：2019-06-12 02:02:02
【问题描述】：

我似乎无法让我的 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; 
}

期待您的帮助！

【问题讨论】：

这个函数的调用频率和时间是多少？创建一个工作示例来演示该问题。假设您的函数正常工作，那么问题可能是 1) 调用的函数过早 dom 尚未准备好，因此 css 行什么也不做 2) 函数多次调用，最后一次调用时，它隐藏了元素
在您尝试调用时，dom 元素是否已经存在？替换为 console.log($("#NotificationDotOnNav")[0]);用于测试...
你能把它放在codepen或其他任何地方吗？
@SirBT 您的函数在#NotificationDotOnNav 元素甚至在DOM 上呈现之前被调用。
想必元素#NotificationDotOnNav是存在的，你的名字没有错别字吧？ console.log(document.getElementById('NotificationDotOnNav')) 是否记录了正确的元素？

标签： javascript jquery css meteor

【解决方案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()

...

【讨论】：

【解决方案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; 
}

【讨论】：

但这有什么帮助呢？它解决了什么问题？它的问题是元素现在将被隐藏，并且它在布局中的空间将被删除，这可能会影响（不利或其他）页面的布局。
你是对的。在这种情况下，只需尝试使用 opacity: 1; （显示）和不透明度：0；（隐藏）
@Tipe 感谢您提出的解决方案，我已经按照您的建议进行了尝试，但您的建议没有任何效果。虽然“测试！”弹出，“#NotificationDotOnNav”根本不显示。欢迎任何其他想法。
@Tipe 奇怪的是，这仅在我运行时才有效： $("#NotificationDotOnNav").css('opacity', '1');在浏览器控制台中！

【解决方案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;    
}

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

【讨论】：