1
votes

Cloche de notification Laravel

J'ai une question.

J'ai une sorte de ceci dans mon application. Quand j'ai 0 notifications, ça devient 0.

Ce que je veux, c'est supprimer le numéro, donc il n'a que la cloche (sans numéro, et sans ce fond rouge)

Mon code:

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

J'essaye de le faire avec JavaScript:

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

Rien ne se passe. Il affiche toujours la cloche avec 0.

laravel javascript

7 commentaires

Avez-vous quelque chose comme react / angular / vue avec lequel travailler?

@TarekAdam non.

Pouvez-vous confirmer que votre js se déclenche réellement sans erreur? Est-ce

3 Réponses :

1
votes

Je sais que votre question utilise Javsacript mais comme alternative plus simple, vous pourriez le faire avec la pseudo-classe vide . Cependant, vous ne devriez pas du tout afficher le nombre s'il était 0.

<link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"/>
<div class="badge">
  <i class="fa fa-bell"></i>
  <span class="notification">4</span>
</div>

<div class="badge">
  <i class="fa fa-bell"></i>
  <span class="notification"></span>
</div>

.notification{
  background: red;
  color: white;
  padding: 5px;
}

.notification:empty {
  display: none;
}

0 commentaires

0
votes

Utilisez-vous Blade? Si c'est le cas, cochez l'élément.

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

Si vous voulez vraiment utiliser js, essayez de commenter au-dessus de celui-ci

0 commentaires

1
votes

Au lieu d'utiliser .value (), essayez d'utiliser .innerHTML pour vérifier si les notifications === 0. .innerHTML obtient ou définit le HTML ou XML contenu dans l'élément tandis que .value () obtient la propriété value de l'élément. https://developer.mozilla.org/en-US/ docs / Web / API / Element / innerHTML

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

Puisque vous utilisez Laravel, je vous suggère d'utiliser l'instruction blade @if https://laravel.com/docs/master/blade#if-statements

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

0 commentaires