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类的所有元素。但是，鉴于其ID，我无法弄清楚如何隐藏特定警报。

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

Answer 1

您需要使用ID选择器：

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

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

Answer 2

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

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

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

感谢一百万，并且抱歉浪费你的时间！

Answer 5

您可以像这样简单地使用id（＃）选择器。

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

Answer 6

使用ID选择器#

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

Answer 7

只需使用ID而不是类？我真的不明白为什么你会问你知道Jquery吗？

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

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

Answer 8

我使用此提醒

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

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

：

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

重新隐藏它，我打电话

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

Answer 9

我使用此提醒

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 10

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

setTimeout 1秒-调用一个显示div的函数
setTimeout持续10秒-调用隐藏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>

如何使用twitter bootstrap显示/隐藏特定警报？

11 个答案: