jQuery 如何使用 twitter bootstrap 显示/隐藏特定警报？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17357630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I show/hide a specific alert with twitter bootstrap?
提问by royhowie
Here's an example of an alert I'm using:
这是我正在使用的警报示例：
<div class="alert alert-error" id="passwordsNoMatchRegister">
<span>
<p>Looks like the passwords you entered don't match!</p>
</span>
</div>
I know that $(".alert").show()and $(".alert").hide()will show/hide all the elements of the .alertclass. However, I cannot figure out how to hide a specific alert, given its id.
我知道这一点$(".alert").show()，$(".alert").hide()并将显示/隐藏类的所有元素.alert。但是，鉴于其 ID，我无法弄清楚如何隐藏特定警报。
I want to avoid using .alert("close"), since that permanently removes the alert, and I need to be able to recall it.
我想避免使用.alert("close")，因为这会永久删除警报，我需要能够召回它。
回答by bipen
You need to use an id selector:
您需要使用 id 选择器：
//show
$('#passwordsNoMatchRegister').show();
//hide
$('#passwordsNoMatchRegister').hide();
#is an id selector and passwordsNoMatchRegisteris the id of the div.
#是一个 id 选择器，passwordsNoMatchRegister是 div 的 id。
回答by Mike
Add the "collapse" class to the alert div and the alert will be "collapsed" (hidden) by default. You can still call it using "show"
将“折叠”类添加到警报 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>
回答by william.eyidi
On top of all the previous answers, dont forget to hide your alert before using it with a simple style="display:none;"
在所有先前的答案之上，不要忘记在使用简单的警报之前隐藏警报 style="display:none;"
<div class="alert alert-success" id="passwordsNoMatchRegister" role="alert" style="display:none;" >Message of the Alert</div>
Then use either:
然后使用：
$('#passwordsNoMatchRegister').show();
$('#passwordsNoMatchRegister').fadeIn();
$('#passwordsNoMatchRegister').slideDown();
回答by Jeff Mergler
I use this alert
我使用此警报
<div class="alert alert-error hidden" id="successfulSave">
<span>
<p>Success! Result Saved.</p>
</span>
</div>
repeatedly on a page each time a user updates a result successfully:
每次用户成功更新结果时，都会在页面上重复：
$('#successfulSave').removeClass('hidden');
to re-hide it, I call
重新隐藏它，我打电话
$('#successfulSave').addClass('hidden');
回答by aman
You can simply use id(#)selector like this.
您可以像这样简单地使用 id(#)selector 。
$('#passwordsNoMatchRegister').show();
$('#passwordsNoMatchRegister').hide();
回答by royhowie
For all of you who answered correctly with the jQuery method of $('#idnamehere').show()/.hide(), thank you.
对于所有使用 jQuery 方法正确回答的人$('#idnamehere').show()/.hide()，谢谢。
It seems <script src="http://code.jquery.com/jquery.js"></script>was misspelled in my header (which would explain why no alert calls were working on that page).
它似乎<script src="http://code.jquery.com/jquery.js"></script>在我的标题中拼写错误（这可以解释为什么该页面上没有警报调用）。
Thanks a million, though, and sorry for wasting your time!
不过，谢谢一百万，对不起，浪费你的时间！
回答by Waruna Manjula
I use this alert
我使用此警报
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>
回答by Kylie
Just use the ID instead of the class?? I dont really understand why you would ask though when it looks like you know Jquery ?
只需使用 ID 而不是类？我真的不明白为什么你会在看起来你知道 Jquery 的时候问？
$('#passwordsNoMatchRegister').show();
$('#passwordsNoMatchRegister').hide();
回答by koala_dev
Use the id selector #
使用 id 选择器 #
$('#passwordsNoMatchRegister').show();
回答by Manohar Reddy Poreddy
I had this problem today, was in a lot of time crunch, so below idea worked:
我今天遇到了这个问题，时间很紧，所以下面的想法有效：
- setTimeout with 1 sec -- call a function that shows the div
- setTimeout with 10 sec -- call a function that hides the div
- setTimeout with 1 sec -- 调用显示 div 的函数
- setTimeout with 10 sec -- 调用一个隐藏 div 的函数
Fade is not there, but that bootstrap feeling will be there.
淡入淡出不存在，但那种引导的感觉会存在。
Hope that helps.
希望有帮助。
