Twitter Bootstrap警报消息关闭并再次打开

Question

我有警报消息的问题.它正常显示,我可以在用户按下x(关闭)时将其关闭,但是当用户再次尝试显示它时(例如,单击按钮事件),则不会显示.(此外,如果我将此警报消息打印到控制台,它等于[].)我的代码在这里:

 <div class="alert" style="display: none">
   <a class="close" data-dismiss="alert">×</a>
   <strong>Warning!</strong> Best check yo self, you're not looking too good.
 </div>

事件:

 $(".alert").show();

PS!我需要在某些事件发生后显示警告消息(例如,单击按钮).或者我做错了什么？

Answer 1

数据消除完全删除元素.请改用jQuery的.hide()方法.

修复它快速的方法:

使用内联javascript隐藏元素onclick如下:

<div class="alert" style="display: none"> 
    <a class="close" onclick="$('.alert').hide()">×</a>  
    <strong>Warning!</strong> Best check yo self, you're not looking too good.  
</div>

<a href="#" onclick="$('alert').show()">show</a>

http://jsfiddle.net/cQNF​​L/

但是,只有在你懒惰的情况下才能使用它(如果你想要一个可维护的应用程序,这不是一件好事).

这样做的方法:

创建用于隐藏元素的新数据属性.

使用Javascript:

$(function(){
    $("[data-hide]").on("click", function(){
        $("." + $(this).attr("data-hide")).hide()
        // -or-, see below
        // $(this).closest("." + $(this).attr("data-hide")).hide()
    })
})

然后将数据关闭更改为数据隐藏在标记中.jsfiddle的例子.

$("." + $(this).attr("data-hide")).hide()

这将使用data-hide中指定的类隐藏所有元素,即:data-hide="alert"将使用alert类隐藏所有元素.

Xeon06提供了另一种解决方案:

$(this).closest("." + $(this).attr("data-hide")).hide()

这只会隐藏最接近的父元素.如果您不想为每个警报指定一个唯一的类,这非常有用.但请注意,您需要将关闭按钮放在警报内.

从jquery doc定义.closest :

对于集合中的每个元素,通过测试元素本身并遍历DOM树中的祖先来获取与选择器匹配的第一个元素.

Answer 2

我只是用一个模型变量来显示/隐藏对话框并删除了 data-dismiss="alert"

例:

<div data-ng-show="vm.result == 'error'" class="alert alert-danger alert-dismissable">
    <button type="button" class="close" data-ng-click="vm.result = null" aria-hidden="true">&times;</button>
    <strong>Error  !  </strong>{{vm.exception}}
</div>

适合我,并停止了出去jquery的需要

Answer 3

我认为解决这个问题的一个好方法是利用Bootstrap的close.bs.alert事件类型隐藏警报而不是删除警报.Bootstrap暴露此事件类型的原因是您可以覆盖从DOM中删除警报的默认行为.

$('.alert').on('close.bs.alert', function (e) {
    e.preventDefault();
    $(this).addClass('hidden');
});

Answer 4

如果你正在使用一个MVVM库,比如knockout.js(我强烈推荐)你可以更干净地做到:

<div class="alert alert-info alert-dismissible" data-bind="visible:showAlert">
   <button type="button" class="close" data-bind="click:function(){showAlert(false);}>
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
   </button>
   Warning! Better check yourself, you're not looking too good.
</div>

http://jsfiddle.net/bce9gsav/5/