web-dev-qa-db-fra.com

Comment afficher / masquer une alerte spécifique avec Twitter Bootstrap?

Voici un exemple d'alerte que j'utilise:

<div class="alert alert-error" id="passwordsNoMatchRegister">
  <span>
    <p>Looks like the passwords you entered don't match!</p>
  </span>
</div>

Je sais que $(".alert").show() et $(".alert").hide() affichera/cachera tous les éléments de la classe .alert. Cependant, je ne peux pas comprendre comment cacher une alerte spécifique, étant donné son identifiant.

Je veux éviter d'utiliser .alert("close"), car cela supprime définitivement l'alerte et je dois pouvoir la rappeler.

javascriptjqueryhtmltwitter-bootstrap
30
royhowie

Vous devez utiliser un sélecteur d'identifiant:

 $('#passwordsNoMatchRegister').show();
 $('#passwordsNoMatchRegister').hide().

# est un sélecteur d'identifiant et passwordsNoMatchRegister est l'identifiant du div.

59
bipen

Ajoutez la classe "collapse" à la div alert et l'alerte sera "réduite" (masquée) par défaut. Vous pouvez toujours l'appeler en utilisant "show"

<div class="alert alert-error collapse" role="alert" id="passwordsNoMatchRegister">
  <span>
  <p>Looks like the passwords you entered don't match!</p>
  </span>
</div>
47
Mike

En plus de toutes les réponses précédentes, n’oubliez pas de cacher votre alerte avant de l’utiliser avec un simple style="display:none;"

<div class="alert alert-success" id="passwordsNoMatchRegister" role="alert" style="display:none;" >Message of the Alert</div>

Ensuite, utilisez soit:

$('#passwordsNoMatchRegister').show();

$('#passwordsNoMatchRegister').fadeIn();

$('#passwordsNoMatchRegister').slideDown();
13
william.eyidi

Merci à tous ceux qui ont répondu correctement avec la méthode jQuery de $('#idnamehere').show()/.hide().

Il semble <script src="http://code.jquery.com/jquery.js"></script> était mal orthographié dans mon en-tête (ce qui expliquerait pourquoi aucun appel d'alerte ne fonctionnait sur cette page).

Merci mille fois, et désolé de perdre votre temps!

3
royhowie

J'utilise cette alerte

<div class="alert alert-error hidden" id="successfulSave">
  <span>
    <p>Success! Result Saved.</p>
  </span>
</div>

à plusieurs reprises sur une page chaque fois qu'un utilisateur met à jour un résultat avec succès:

$('#successfulSave').removeClass('hidden');

pour le cacher, j'appelle

$('#successfulSave').addClass('hidden');
2
Jeff Mergler

J'utilise cette alerte

function myFunction() {
   $('#passwordsNoMatchRegister').fadeIn(1000);
   setTimeout(function() { 
       $('#passwordsNoMatchRegister').fadeOut(1000); 
   }, 5000);
}
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button onclick="myFunction()">Try it</button> 


<div class="alert alert-danger" id="passwordsNoMatchRegister" style="display:none;">
    <strong>Error!</strong> Looks like the passwords you entered don't match!
  </div>
2
Waruna Manjula

Vous pouvez simplement utiliser le sélecteur id (#) comme ceci.

 $('#passwordsNoMatchRegister').show();
 $('#passwordsNoMatchRegister').hide();
2
aman

Utilisez le sélecteur d'identifiant #

$('#passwordsNoMatchRegister').show();
1
koala_dev

Il suffit d'utiliser l'ID à la place de la classe? Je ne comprends pas vraiment pourquoi tu demanderais quand on dirait que tu connais Jquery?

$('#passwordsNoMatchRegister').show();

$('#passwordsNoMatchRegister').hide();
1
Kylie