Comment puis-je afficher/masquer une alerte avec twitter bootstrap?

Voici un exemple d'une alerte, je suis en utilisant:

<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() va afficher/masquer tous les éléments de la .alert classe. Cependant, je ne peux pas comprendre comment cacher une alerte spécifique, compte tenu de son id.

Je veux éviter d'utiliser .alert("close"), depuis que supprime définitivement l'alerte, et j'ai besoin d'être en mesure de le rappeler.

  • Tout le sélecteur css et jQuery fonction $() trouverez les éléments correspondant au sélecteur. div, .class_name, #elem etc. Il va même faire de spécial sélecteurs comme sélecteur d'attribut [id="id_name"] ou *. Il suffit de penser comme un sélecteur css et vous devriez vous sentir plus créatif de l'utiliser.
  • pouvez-vous fournir fiddle à reproduire votre problème?
  • J'ai fait remarquer ci-dessous; j'ai mal orthographié <script src="http://code.jquery.com/jquery.js"></script> dans l'en-tête (c'est pourquoi rien de jQuery a été de travail).
InformationsquelleAutor royhowie | 2013-06-28
  1. 60

    Vous avez besoin d'utiliser un sélecteur d'id:

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

    # est un sélecteur d'id et passwordsNoMatchRegister est l'id de la div.

    • Ok. Je m'explique: Si vous utilisez la méthode par défaut (celui fourni par twitter bootstrap), vous pouvez supprimer l'alerte entièrement (ce qui signifie qu'il ne peut pas être appelée de nouveau). Je sais comment appeler par sélecteur d'id, mais il ne semble pas fonctionner avec le bootstrap alertes (bien que cela ne fonctionne que si vous les appelez par classe, pas par alerte—à moins que je suis en train de faire quelque chose de tout à fait tort).
    • si elle travaille avec la classe . puis je suis sûr qu'il doit travailler avec sélecteur d'id #.. assurez-vous qu'il n'en est rien, que c'est de casser ce code.. et oui... assurez-vous que toutes vos id est unique
    • ignorer ci-dessus, il suffit de regarder mon post ci-dessous
    • ok cool... bon vous l'avez compris.. bon codage
    InformationsquelleAutor bipen
  2. 49

    Ajouter "l'effondrement" de la classe à l'alerte div et l'alerte "s'est effondré" (caché) par défaut. Vous pouvez toujours l'appeler à l'aide de "montrer"

    <div class="alert alert-error collapse" role="alert" id="passwordsNoMatchRegister">
  <span>
  <p>Looks like the passwords you entered don't match!</p>
  </span>
</div>
    • effondrement, au lieu de "cacher" - qui a été la clé, merci.
    • de manière créative pour ré-utiliser les Bottes de classes.
    • .l'effondrement des ensembles de "visibilité:none". Si vous le faites, l' .méthode show() ne fonctionnera pas, car il met en display:block et ne change pas la visibilité. La classe de Bootstrap "caché" définit également la visibilité:aucun, si ce n'est pas non plus une solution viable, je pense que @william.eyidi fait de mieux, mais plutôt d'utiliser une classe simple au lieu d'un style en ligne.
    • Votre commentaire semble être incorrecte de la v4 au moins. La classe css collapse jeux de display: none, et le jQuery .show() méthode définit une ligne de style de display: block substitution de la display: none de la collapse classe css. Par conséquent, il fonctionne comme décrit ci-dessus.
    InformationsquelleAutor Mike
  3. 13

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

    Puis à utiliser:

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

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

$('#passwordsNoMatchRegister').slideDown();
    • voulez-vous dire display: none; ?
    InformationsquelleAutor william.eyidi
  4. 3

    Pour tous ceux qui ont répondu correctement avec la méthode jQuery de $('#idnamehere').show()/.hide(), je vous remercie.

    Il semble <script src="http://code.jquery.com/jquery.js"></script> a été mal orthographié dans l'en-tête (ce qui expliquerait pourquoi pas d'alerte des appels à travailler sur cette page).

    Merci un million, même si, et désolé pour perdre votre temps!

    • Il est bon que vous avez trouvé la cause réelle. Pour info.. Si vous utilisez un javacript/jquery codes et si ceux qui ne sont pas de travail, utiliser Firebug dans chrome ou firefox, ou le développeur de l'outil dans ie pour vérifier si il ya une erreur dans le script.
    InformationsquelleAutor royhowie
  5. 2

    Vous pouvez simplement utiliser l'id(#)sélecteur de ce genre.

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

    - Je utiliser 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 à la suite avec succès:

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

    de re-cacher, j'appelle

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

    - Je utiliser cette alerte

    JS:

    function myFunction() {
   $('#passwordsNoMatchRegister').fadeIn(1000);
   setTimeout(function() { 
       $('#passwordsNoMatchRegister').fadeOut(1000); 
   }, 5000);
}

    HTML:

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

    InformationsquelleAutor Waruna Manjula
  8. 1

    Utiliser le sélecteur d'id #

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

    Suffit d'utiliser l'ID au lieu de la classe?? Je n'ai pas vraiment comprendre pourquoi, me direz-vous, mais quand il regarde comme vous le savez Jquery ? 

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

$('#passwordsNoMatchRegister').hide();
    InformationsquelleAutor Kylie
  10. 0

    J'ai eu ce problème aujourd'hui, a été dans beaucoup de manque de temps, donc, ci-dessous idée a fonctionné:

    • setTimeout avec 1 sec -- appel d'une fonction qui affiche la div
    • setTimeout avec 10 sec -- appel d'une fonction qui cache la div

    Fondu n'est pas là, mais que bootstrap sentiment sera là.

    Espère que ça aide.

    InformationsquelleAutor Manohar Reddy Poreddy