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

本文介绍了Twitter Bootstrap警报消息关闭并再次打开的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我的提醒信息有问题。它正常显示，我可以在用户按 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>

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