如何使用twitter bootstrap显示/隐藏特定警报？

下面是我使用的警报的例子：如何使用twitter bootstrap显示/隐藏特定警报？

<div class="alert alert-error" id="passwordsNoMatchRegister"> 
    <span> 
    <p>Looks like the passwords you entered don't match!</p> 
    </span> 
</div>

我知道$(".alert").show()和$(".alert").hide()将显示/隐藏.alert类的所有元素。但是，我无法弄清楚如何隐藏特定的警报，因为它的ID。

我想避免使用.alert("close")，因为它会永久删除警报，我需要能够回忆它。

来源

2013-06-28 royhowie

任何CSS选择器的jQuery函数'$（）'会发现匹配该选择器的元素。 'div'，'.class_name'，'＃elem'等。它甚至会做特殊的选择器，如属性选择器'[id =“id_name”]'或'*'。只要把它看作是一个CSS选择器，你应该觉得它更有创意。 –

你能提供'小提琴'来重现你的问题吗？ – muneebShabbir

我在下面评论;我拼写错了''在我的标题中（这就是为什么jQuery没有任何工作）。 – royhowie

您需要使用id选择：

$('#passwordsNoMatchRegister').show(); 
$('#passwordsNoMatchRegister').hide().

#是id选择和passwordsNoMatchRegister是div的ID。

来源

2013-06-28 05:15:03 bipen

好的。让我解释一下：如果您使用默认方式（由twitter bootstrap提供的方式），则完全删除警报（意味着不能再次调用警报）。我知道如何通过id选择器来调用，但它似乎不适用于引导警报（到目前为止，只有当你按类调用它们时，才会起作用，除非我正在做一些完全错误的事情）。 – royhowie

如果它与'''类一起工作，那么我相信它应该与id选择符'＃'一起工作..确保没有什么东西会破坏这个代码..并且是...确保您的所有id都是**唯一的** – bipen

忽略以上，只看我的帖子下面 – royhowie

使用id选择#

$('#passwordsNoMatchRegister').show();

来源

2013-06-28 05:15:55

只需使用ID而不是类？我真的不明白为什么你会问，但当它看起来像你知道JQuery的？

$('#passwordsNoMatchRegister').show(); 

$('#passwordsNoMatchRegister').hide();

来源

2013-06-28 05:17:01 KyleK

它似乎并没有工作。 – royhowie

您可以简单地使用像这样的id（＃）选择器。

$('#passwordsNoMatchRegister').show(); 
$('#passwordsNoMatchRegister').hide();

来源

2013-06-28 05:17:54 aman

对于所有使用jQuery方法$('#idnamehere').show()/.hide()正确回答的人，谢谢。

看起来<script src="http://code.jquery.com/jquery.js"></script>拼写错误在我的标题（这将解释为什么没有警报呼叫在该页面上工作）。

非常感谢，但是，很抱歉浪费你的时间！

来源

2013-06-28 05:21:08 royhowie

很好，你找到了真正的原因。仅供参考。如果您使用的是任何javacript/jquery代码，如果这些代码不起作用，请使用chrome或firefox中的Firebug或ie中的开发人员工具来检查脚本中是否有任何错误。 – Ravimallya

将“collapse”类添加到警报格，并且默认情况下警报将“折叠”（隐藏）。你还可以把它用“秀”

<div class="alert alert-error collapse" role="alert" id="passwordsNoMatchRegister"> 
    <span> 
    <p>Looks like the passwords you entered don't match!</p> 
    </span> 
</div>

来源

2014-09-29 20:12:44 Mike

'collapse'，而不是'hide' - 这是关键，谢谢。 – Mike

重新使用Bootstraps类的创造性方式。 – blackhawk

.collapse设置“可见性：无”。如果这样做，则.show（）方法将不起作用，因为它设置了display：block并且不会更改可见性。 Bootstrap类“隐藏”也设置可见性：无，所以这也不是一个可行的解决方案我认为@ william.eyidi做得更好，而是使用简单的类而不是内联样式。 –

在以前的所有答案的顶部，不要忘记隐藏自己的警报使用它与一个简单的style="display:none;"

<div class="alert alert-success" id="passwordsNoMatchRegister" role="alert" style="display:none;" >Message of the Alert</div>

然后使用前：

$('#passwordsNoMatchRegister').show(); 

$('#passwordsNoMatchRegister').fadeIn(); 

$('#passwordsNoMatchRegister').slideDown();

来源

2015-02-09 18:35:56

你的意思是显示：无; ？ – Ehsan

我用这个警报

<div class="alert alert-error hidden" id="successfulSave"> 
    <span> 
    <p>Success! Result Saved.</p> 
    </span> 
</div>

页面上反复

每个用户更新成功的结果时间：

$('#successfulSave').removeClass('hidden');

重新隐藏它，我叫

$('#successfulSave').addClass('hidden');

来源

2017-01-18 20:07:12

如何使用twitter bootstrap显示/隐藏特定警报？

回答

相关问题