我的警报消息有问题。它可以正常显示,并且当用户按下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!仅在发生某些事件(例如,单击按钮)后才需要显示警报消息。还是我做错了什么?
数据删除会完全删除该元素。请改用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()
})
})
然后在标记中将data-dismiss更改为data-hide。jsfiddle的示例。
$("." + $(this).attr("data-hide")).hide()
这将隐藏数据隐藏中指定类的所有元素,即:data-hide="alert"
将隐藏警报类的所有元素。
Xeon06提供了另一种解决方案:
$(this).closest("." + $(this).attr("data-hide")).hide()
这只会隐藏最接近的父元素。如果你不想给每个警报一个唯一的类,这将非常有用。请注意,但是,你需要在警报中放置关闭按钮。
jquery doc中.closest的定义:
对于集合中的每个元素,通过测试元素本身并在DOM树中遍历其祖先,获得与选择器匹配的第一个元素。
嘿!关于您的正确答案。这将隐藏
alert
页面上具有相同类(即)的每个元素。一种解决方案是用此行替换回调的内容$(this).closest("." + $(this).attr("data-hide")).hide();
,这只会影响最接近的父元素,因为通常将dismiss按钮放置在受影响的警报中。是的,我没想到要让它那样工作。但是,这将在很大程度上消除此解决方案的简单性。我将其添加为现有代码的注释。谢谢!
这是新手..您将在哪里定义'$(function(){..'
JavaScript文件或<script>此处代码</ script>标记中的任何位置。
如果您将使用$(document).on('click','[data-hide]',function(){/ * * /})您的答案将是完美的;)