web-dev-qa-db-ja.com

Twitterブートストラップで特定のアラートを表示/非表示するにはどうすればよいですか？

私が使用しているアラートの例を次に示します。

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

$(".alert").show()と$(".alert").hide()は_.alert_クラスのすべての要素を表示/非表示にすることを知っています。ただし、IDを指定して特定のアラートを非表示にする方法はわかりません。

.alert("close")を使用することは避けたいのですが、それはアラートを永久に削除し、それを思い出すことができる必要があるからです。

javascriptjqueryhtmltwitter-bootstrap
30
royhowie

IDセレクターを使用する必要があります。

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

#はIDセレクターであり、passwordsNoMatchRegisterはdivのIDです。

59
bipen

「折りたたみ」クラスをアラートdivに追加すると、デフォルトでアラートは「折りたたみ」（非表示）になります。引き続き「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

上記のすべての回答に加えて、単純なstyle="display:none;"で使用する前にアラートを非表示にすることを忘れないでください

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

次に、次のいずれかを使用します。

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

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

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

$('#idnamehere').show()/.hide()のjQueryメソッドで正解した皆さん、ありがとう。

そうみたいです <script src="http://code.jquery.com/jquery.js"></script>ヘッダーのスペルが間違っていました（そのページでアラート呼び出しが機能しなかった理由を説明します）。

しかし、100万人に感謝し、時間を浪費してすみません！

3
royhowie

このアラートを使用します

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

ユーザーが結果を正常に更新するたびにページ上で繰り返し：

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

それを再非表示にするために、私は呼び出します

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

このアラートを使用します

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

このように単純にid（＃）selectorを使用できます。

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

IDセレクター#を使用します

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

クラスの代わりにIDを使用するだけですか??私はあなたがJqueryを知っているように見えるときにあなたが尋ねる理由を本当に理解していませんか？

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

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