javascript - Bootstrap 4 显示警报

Question

在 Bootstrap v4 中，我如何通过 JavaScript 显示警报？我的目标是在页面加载时隐藏警报，然后在 AJAX 调用完成时打开警报以显示消息。

我在文档中看到了如何关闭警报，但没有看到如何显示它: https://getbootstrap.com/docs/4.0/components/alerts/#methods

我有以下 fiddle ，我首先显示警报(不是我想要的)，然后按一个按钮将其关闭。那里有第二个按钮可以将其重新打开，但不知道要传递给它什么才能使其工作。我想如果我能让这个示例工作，我就能弄清楚如何让它与页面加载时未显示的警报一起工作

https://jsfiddle.net/jhf2e5h6/

<div class="row">
  <div class="col-sm-12">
     <div id="divInfo" class="alert alert-success show fade ">
        <div class="alert-heading"> :</div> <p></p>
     </div>
 </div>
</div>

<button id="close">Close</button>
<button id="show">Show</button>




<script type="text/javascript">
    $(function () {




        $('#close').on('click', function () {
            $('#divInfo').alert('close');
        });

        $('#Show').on('click', function () {
            $('#divInfo').alert('?????');
        });

        // 
    });


</script>

Answer 1

方法 .alert 破坏 DOM。所以没有回去的可能。查看文档: https://getbootstrap.com/docs/4.0/components/alerts/#methods

你应该尝试使用 removeClass/addClass。

$('#close').on('click', function () {
    $('#divInfo').removeClass('show');
});

$('#show').on('click', function () {
    $('#divInfo').addClass('show');
});

而且你在'Show'上有错误，你应该尝试'show'。