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

一尘不染

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

javascript

我的警报消息有问题。它正常显示，当用户按下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！ 仅在发生某些事件（例如，单击按钮）后才需要显示警报消息。还是我做错了什么？

阅读 333

2020-05-01

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

但是，仅当您懒惰时才应使用它（如果您想要可维护的应用程序，这不是一件好事）。

做正确的方法：

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

Javascript：

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






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

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

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

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

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

jquery doc中.closest的定义：

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

2020-05-01