javascript - 可能很简单 : showing and hiding a div using removeClass/addClass

Question

这应该非常简单，也许我遗漏了一些明显的东西，但这是我的问题。

我有下面的 div 与 Bootstrap 类“隐藏”。单击表单上的提交按钮时，表单将被提交，如果回调函数返回错误，我将删除“隐藏”类，以便用户看到警告消息

删除“隐藏”类以显示警报消息:

$('.not-submitted').removeClass('hidden');

包含“隐藏”类的 html:

<div class="not-submitted alert alert-error hidden">
    <a class="close" data-dismiss="alert">×</a>
    <strong>Error!</strong> Form not submitted, please try again.
</div>

上面的方法工作正常，但是当用户再次尝试并且第二次失败时，警报消息不会显示，因为用户已经关闭了警报消息框并且“隐藏”类已经被删除，事实上当删除该类时，它似乎删除了整个 div 而不仅仅是“隐藏”类。

所以我需要做的就是重新添加类。我认为这很容易做到:

$('.not-submitted').addClass('hidden');

不幸的是，这不起作用(如果删除整个 div 也不起作用)。

有人对如何最好地对此进行排序有任何想法吗？

Answer 1

是的，data-dismiss 会瓦解你可怜的Alert。
从您的×按钮中删除可忽略数据data-dismiss。

<a class="close">×</a>

添加此 jQ:

$('.not-submitted .close').click(function(){
    $(this).closest('.not-submitted').addClass('hidden');
});