Javascript 拉维通知钟

我有个问题

我的应用程序中有类似的功能。当我有0个通知时，它将变为0

我想要的是删除数字，所以它只有铃声（没有数字，也没有红色背景）

我的代码：

<a href="#" class="m-nav__link m-dropdown__toggle" id="m_topbar_notification_icon">
    <span class="m-nav__link-icon">
       <span class="m-nav__link-icon-wrapper">
          <i class="flaticon-music-2"></i>
       </span>
       <span class="m-nav__link-badge m-badge m-badge--success " id="notification">
       </span>
    </span>
</a>

我正试图用JavaScript实现这一点：

<script>
  if(document.getElementById('notification').value() ===0)
  {
     document.getElementById('notification').style.display='none';
  }
</script>

if（document.getElementById（'notification'）.value（）==0）
{
document.getElementById（'notification'）.style.display='none'；
}

---

什么也没发生。它仍然显示带0的铃声。

我知道您的问题使用了Javsacript，但作为一个更简单的替代方案，您可以使用css伪类来实现这一点。但是，如果该数字为0，则必须完全不输出该数字

。通知{
背景：红色；
颜色：白色；
填充物：5px；
}
。通知：空{
显示：无；
}

4.

您正在使用刀片服务器吗？如果是这样，请在元件周围进行检查

@if(notifications > 0)
  this will only be displayed if there are greater notifications than 0
@endif

如果您真的想使用js，请尝试在这个上面添加注释，而不是使用.value（），尝试使用.innerHTML检查通知是否===0。innerHTML获取或设置元素中包含的HTML或XML，而.value（）获取元素的value属性

既然您使用的是Laravel，我建议您使用blade@if语句

@if（通知>0）
{{通知}}
@恩迪夫

你有没有像react/angular/vue这样的东西可以使用？@TarekAdam nope。你能确认你的js实际上是无误发射的吗？那是在页首还是在页尾？我询问的原因是，如果脚本提前触发，“通知”可能还不存在。@结尾处的TarekAdam您的span没有“value（）”方法。同时也重视财产。它不是一个输入。但您可以使用“innerText”属性来获取通知计数

if(document.getElementById('notification').innerHTML === '0')
{
  document.getElementById('notification').style.display = 'none';
}

@if(notifications > 0)
  <span class="m-nav__link-badge m-badge m-badge--success " id="notification">{{ notifications }}</span>
@endif