J'utilise les éléments suivants pour afficher les liens Facebook et Twitter d'un utilisateur.

<ul class="list-inline">
  <li style="padding-right:20px;">
    <a href="https://{{channel.facebook_page}}" rel="nofollow" target="_blank" title="{{channel.channel_name}} On FaceBook"><i aria-hidden="true" class="fa fa-facebook fa-2x" style='color:#ee6f00'></i></a>
  </li>
   <li>
   <a href="https://{{channel.twitter_page}}" rel="nofollow" target="_blank" title="{{channel.channel_name}} On Twitter"><i aria-hidden="true" class="fa fa-twitter fa-2x" style='color:#ee6f00'></i></a>
   </li>
</ul>

Parfois, les utilisateurs de mon site n'ont pas de compte Facebook ou Twitter. Existe-t-il donc un moyen de masquer la li si la valeur href après la https:// est vide. En d'autres termes, si mon {{channel.facebook_page}} est vide, masquer th li.

-1
Aiden Doyle 16 avril 2018 à 21:35

3 réponses

Meilleure réponse

Ne sachant pas quel cadre vous utilisez pour les modèles, je vais essayer et deviner Angular en fonction de vos balises dans votre profil.

Vous pouvez utiliser Angular avec ng-if pour afficher l'élément s'il évalue à soyez honnête

<li 
  ng-if="channel.facebook_page"
  style="padding-right:20px;">
    <a href="https://{{channel.facebook_page}}" rel="nofollow" target="_blank" title="{{channel.channel_name}} On FaceBook"><i aria-hidden="true" class="fa fa-facebook fa-2x" style='color:#ee6f00'></i></a>
</li>
1
epascarello 16 avril 2018 à 18:46

Vous pouvez faire le sélecteur a[href='https://'] utilisé par @LGSon dans son CSS, mais l'utiliser dans votre javascript, puis récupérer l'élément parentElement et le définir sur display: none

document.querySelectorAll('[href="https://"]').forEach(function(el) {
    el.parentElement.style.display = 'none';
});
<ul class="list-inline">
  <li style="padding-right:20px;">
    <a href="https://" rel="nofollow" target="_blank" title="{{channel.channel_name}} On FaceBook"><i aria-hidden="true" class="fa fa-facebook fa-2x" style='color:#ee6f00'></i> Facebook</a>
  </li>
   <li>
   <a href="https://twitter.com" rel="nofollow" target="_blank" title="{{channel.channel_name}} On Twitter"><i aria-hidden="true" class="fa fa-twitter fa-2x" style='color:#ee6f00'></i> Twitter</a>
   </li>
</ul>
0
dave 16 avril 2018 à 18:41

Un script serait une solution évidente, bien qu'il y en ait une de plus.

Utilisez le sélecteur d'attribut CSS [attribute='value'], et faites quelque chose comme ça.

a[href='https://'] {
  display: none;
}

Et pour le remplissage défini sur le li, utilisez plutôt un margin sur l'ancre a, et vous pouvez résoudre ce problème avec CSS seul, et obtenir le même résultat visuel comme masquant le li.

2
LGSon 16 avril 2018 à 18:52