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

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")，因为这会永久删除警报，并且我需要能够召回它。

score 72 · Accepted Answer

您需要使用 id 选择器：

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

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

score 54 · Accepted Answer

将“collapse”类添加到警报 div 中，默认情况下警报将“折叠”（隐藏）。您仍然可以使用“显示”来调用它

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

score 20 · Accepted Answer

在所有先前的答案之上，不要忘记在使用它之前隐藏您的警报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();

score 4 · Accepted Answer

我使用此警报

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

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

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

重新隐藏它，我打电话

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

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

不过，谢谢一百万，很抱歉浪费了您的时间！

score 2 · Accepted Answer

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

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

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

score 2 · Accepted Answer

我使用此警报

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>

score 1 · Accepted Answer

1

使用 id 选择器#

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

于 2013-06-28T05:15:55.260 回答

score 0 · Accepted Answer

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

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

Fade 不存在，但那种引导的感觉会存在。

希望有帮助。

score 0 · Accepted Answer

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>

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

11 回答 11

Related

Reference