Автоматическое закрытие автозагрузки Bootstrap

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 scope. Загрузите его в переменную. 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); 
    }); 
}); 

РАБОЧАЯ SNIPPET:

$(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>