Twitter Bootstrap警报消息关闭并再次打开 [英] Twitter Bootstrap alert message close and open again

问题描述

我的提醒信息有问题。它正常显示，我可以在用户按 x （关闭）时关闭它，但是当用户再次尝试显示它时（例如，单击按钮事件） ）然后它没有显示。 （此外，如果我将此警报消息打印到控制台，它等于 [] 。）我的代码在这里：

I have a problem with alert messages. It is displayed normally, and I can close it when the user presses x (close), but when the user tries to display it again (for example, click on the button event) then it is not shown. (Moreover, if I print this alert message to console, it is equal to [].) My code is here:

 <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！我需要在事件发生后才显示警告信息（例如，单击按钮）。或者我做错了什么？

P.S! I need to show alert message only after some event happened (for example, button clicked). Or what I am doing wrong?

推荐答案

Data-dismiss完全删除元素。改为使用jQuery的.hide（）方法。

Data-dismiss completely removes the element. Use jQuery's .hide() method instead.

修复方法：

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

Using inline javascript to hide the element onclick like this:

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

但是这应该只在你懒惰的情况下使用（如果你是懒惰的话你想要一个可维护的应用程序。）

操作方法：

创建一个隐藏元素的新数据属性。

Create a new data attribute for hiding an element.

Javascript：

Javascript:

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

然后将数据关闭更改为数据隐藏在标记中。 jsfiddle示例。

and then change data-dismiss to data-hide in the markup. Example at jsfiddle.

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

这将隐藏数据隐藏中指定类的所有元素，即： data-hide =alert将隐藏所有元素警报类。

This will hide all elements with the class specified in data-hide, i.e: data-hide="alert" will hide all elements with the alert class.

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

Xeon06 provided an alternative solution:

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

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

This will only hide the closest parent element. This is very useful if you don't want to give each alert a unique class. Please note that, however, you need to place the close button within the alert.

从 jquery doc ：

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

For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

这篇关于Twitter Bootstrap警报消息关闭并再次打开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！