如何使用 twitter 引导程序显示/隐藏特定警报？

Question

这是我正在使用的警报示例：

<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 class 的所有元素。但是，我不知道如何隐藏特定的警报，给定它的 id。

我想避免使用.alert("close") ，因为这会永久删除警报，我需要能够回忆起它。

Answer 1

您需要使用 id 选择器：

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

#是一个 id 选择器， passwordsNoMatchRegister是 div 的 id。

Answer 2

将“折叠”类添加到警报 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>

Answer 3

除了之前的所有答案之外，在使用简单的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();

Answer 4

我使用此警报

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

每次用户成功更新结果时，都会在页面上重复：

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

重新隐藏它，我打电话

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

Answer 5

您可以像这样简单地使用 id(#)selector 。

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

Answer 6

对于所有使用$('#idnamehere').show()/.hide()的 jQuery 方法正确回答的人，谢谢。

我的标题中似乎<script src="http://code.jquery.com/jquery.js"></script>拼写错误（这可以解释为什么该页面上没有警报调用）。

不过，谢谢一百万，对不起，浪费你的时间！

Answer 7

只使用 ID 而不是类？ 我真的不明白为什么你会在看起来你知道 Jquery 的时候问？

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

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

Answer 8

我使用此警报

 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>

Answer 9

使用 id 选择器#

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

Answer 10

我今天遇到了这个问题，时间很紧，所以下面的想法有效：

• setTimeout with 1 sec -- 调用显示 div 的函数
• setTimeout with 10 sec -- 调用一个隐藏 div 的函数

淡入淡出不存在，但那种引导的感觉会存在。

希望有帮助。

Answer 11

JS

        function showAlert(){
         $('#alert').show();
         setTimeout(function() { 
             $('#alert').hide(); 
         }, 5000);
        }

HTML

<div class="alert alert-success" id="alert" role="alert" style="display:none;" >YOUR MESSAGE</div>

Answer 12

我发现如果您的 class 中有“d-flex” ，警报将不会隐藏。

我有：

class="alert alert-danger d-flex align-items-center"

我将其替换为：

class="alert alert-danger align-items-center"

jQuery：

$('#MyAlert').hide()