Question

我的Bootstrap 3有问题。我想在使用javascript的表单中检测到错误时显示DIV。控件似乎没问题，但DIV没有显示。提前谢谢

html代码：

<div class="alert1 alert-danger hidden">You have to ... !</div>

javascript代码：

<script type="text/javascript">
    $(function(){
     $("#form1").on("submit", function(){
      if($("#dossier_pro_numero_rue").val().length < 1){
       $("div.control-group").addClass("alert-danger");
       $("div.alert1").show("slow").delay(3000).hide("slow");
      return false;}
     });
    });
</script>

编辑：

但最后，我的问题是Bootstrap（3.1）和jquery之间的冲突。

如果我把这一行放在我的头页：

<script src="jquery-2.1.0.min.js"></script>

没关系

但如果我也把这一行：

<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">

错误我的错误消息没有显示

与Bootstrap 2.x版相同的代码是可以的。

你可以测试...... http://jsbin.com/siwik/1/edit?html,css,output

没关系，但如果添加库Bootstrap最新版本，它就不会运行

你明白为什么吗？

编辑：

我找到了一个非常简单和合乎逻辑的解决方案：

你没有把'隐藏'：

    <div class="alert1 alert-danger">You have to ... !</div>

Answer 1

只需使用.alert1代替div.alert1

   $(".alert1").show("slow").delay(3000).hide("slow");

或用于调用DOM元素的id属性选择器。

Answer 2

 $("#form1").on("submit", function(e){
      if($("#dossier_pro_numero_rue").val().length < 1){
          e.preventDefault();
          $("div.control-group").addClass("alert-danger");
          $("div.alert1").show("slow").delay(3000).hide("slow");
      }
 });

JS小提琴： http://jsfiddle.net/Vb8j8/

Bootstrap3 javascript hide / show错误消息

2 个答案: