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

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

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

<a class="close" data-dismiss="alert">×</a><strong>警告！</strong>最好检查一下自己，你看起来不太好.

和事件:

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

P.S！ 我只需要在发生某些事件(例如，单击按钮)后才显示警报消息.还是我做错了什么?

解决方案

Data-dismiss 完全删除元素.改用 jQuery 的 .hide() 方法.

快速修复方法:

使用内联 javascript 来隐藏元素 onclick，如下所示:

<a class="close" onclick="$('.alert').hide()">×</a><strong>警告！</strong>最好检查一下自己，你看起来不太好.

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

jsfiddle/cQNF​​L/

这应该只在你懒惰的时候使用(如果你想要一个可维护的应用程序，这不是一件好事).

正确做法:

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

Javascript:

$(function(){$("[数据隐藏]").on("点击", function(){$("." + $(this).attr("data-hide")).hide()//- 或 -，见下文//$(this).closest("." + $(this).attr("data-hide")).hide()})})

然后在标记中将 data-dismiss 更改为 data-hide.jsfiddle 示例.

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

这将隐藏具有在 data-hide 中指定的类的所有元素，即:data-hide="alert" 将隐藏具有警报类的所有元素.

Xeon06 提供了替代解决方案:

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

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

.closest 的定义来自 jquery doc:

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

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>

And event:

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

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 completely removes the element. Use jQuery's .hide() method instead.

The fix-it-quick method:

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

This should however only be used if you are lazy (which is no good thing if you want an maintainable app).

The do-it-right method:

Create a new data attribute for hiding an element.

Javascript:

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

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

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

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

Definition of .closest from jquery doc:

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.