再次单击时引导警报不起作用答案

【问题标题】：Bootstrap alert not working when clicked again再次单击时引导警报不起作用
【发布时间】：2018-03-12 16:59:29
【问题描述】：

面临一个非常愚蠢的问题。我在单击按钮时显示警报消息。它在第一次点击时完美运行，但在下次点击时无法正常工作，

HTML

<body>
  <div class="container">
    <h2>Dismissal Alert Messages</h2>
    <button>Send Message</button>
    <div class="alert alert-danger fade alert-conatiner">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button> Error! Can not proceed.
    </div>

  </div>
</body>

$(document).ready(function() {
  $('button').click(function() {
    $(".alert").delay(1000).addClass("in").fadeOut(4000);
  })
});

提前致谢！

【问题讨论】：

投反对票的人，请在评论中写下理由投反对票。请不要无缘无故破坏社区。span>

标签： javascript jquery html bootstrap-4 alert

【解决方案1】：

一串解决方案：

$(".alert").delay(1000).addClass("in").toggle(true).fadeOut(4000);

编辑： 它只工作一次的问题是display: none 是由fadeout 函数添加的。 .toggle(true) 将在淡出触发之前将显示属性设置为阻塞。查看更多信息：

.toggle()

.fadeOut()

这里的工作代码：http://jsfiddle.net/hxxjgh63/

【讨论】：

太漂亮了。您能否添加一些解释，以便我可以投票并接受它。这对其他人也有帮助
这非常简洁。 =)

【解决方案2】：

希望对您有所帮助，您必须删除“in”类。

第二件事：style="display:none" 淡出后自动添加到“.alert”中。将此设置为空

$(document).ready(function() {
  $('button').click(function() {
    $(".alert").delay(1000).addClass("in").fadeOut(4000);
    setTimeout(function(){      
        $(".alert").removeClass("in").css('display','');
    },5500);
  })
});

Your demo

【讨论】：

【解决方案3】：

in 类不足以显示alert，因为它设置了display: none，你需要在设置fadeOut 时设置fadeIn

$(document).ready(function() {
  $('button').click(function() {
    $(".alert").fadeIn().addClass('in').delay(4000).promise().done(function(){
    $(this).removeClass("in").fadeOut();
    });
  })
});

JSFiddle

【讨论】：

【解决方案4】：

您还可以在设置duration 后在fadeOut 效果上传递回调

.fadeOut( [duration ] [, complete ] )

$(document).ready(function() {
  $('button').click(function() {
    $(".alert").delay(1000).addClass("in").fadeOut(4000, function(){
        $(".alert").removeClass("in").show();
    });
  })
});

JS Fiddle demo

【讨论】：