引导警报自动关闭不工作

Question

我编写了一个简单的JQuery脚本，可以在不同的时间内自动关闭网页上的每个警报。

这是我的JQuery代码：

$(function() {
        var alert = $('div.alert[auto-close]');
        alert.each(function() {
            var time_period = $(this).attr('auto-close'); 
            setTimeout(function() {
                $(this).alert('close');
            }, time_period);
        });
     });

以下是我的两个示例警报：

<div class="alert alert-danger alert-dismissible" role="alert" auto-close="3000">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                alert one
            </div>
<div class="alert alert-success alert-dismissible" role="alert" auto-close="5000">
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                alert two
            </div>

每个警报都有一个带有值的自定义属性，该属性用作警报关闭时间段。

由于某种原因，警报关闭不起作用。

Answer 1

$(this)在setTimeout作用域中被更改。将其缓存在变量中。在我的例子中，that。

$(function() {
  var alert = $('div.alert[auto-close]');
  alert.each(function() {
    var that = $(this);
    var time_period = that.attr('auto-close');
    setTimeout(function() {
      that.alert('close');
    }, time_period);
  });
});

工作片段：

​

$(function() {
  var alert = $('div.alert[auto-close]');
  alert.each(function() {
    var that = $(this);
    var time_period = that.attr('auto-close');
    setTimeout(function() {
      that.alert('close');
    }, time_period);
  });
});

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="moo" class="alert alert-danger alert-dismissible" role="alert" auto-close="3000">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
  </button>
  alert one
</div>
<div class="alert alert-success alert-dismissible" role="alert" auto-close="5000">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span>
  </button>
  alert two
</div>

​

Answer 2

我将对父元素使用.on("DOMSubtreeModified")：

<div id="messages"></div>
<script>
    // If anything gets appended in #messages, timer is set to remove first element
    $("#messages").on('DOMSubtreeModified', function(){
        var firstChild = this.firstChild;
        setTimeout(function(){
            $(firstChild).alert("close"); //You are looking for this
        }, 2000);
    })
</script>