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

问题描述

我遇到警报消息的问题.它是正常显示的，当用户按下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>

http://jsfiddle.net/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>

http://jsfiddle.net/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.

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