bootstrap alert auto closing funktioniert nicht

Question

Ich schrieb ein einfaches JQuery-Skript, um automatisch alle Warnungen auf meiner Webseite in verschiedenen Zeiträumen zu schließen.

Das ist mein JQuery-Code:

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

Hier sind meine zwei Probe-Benachrichtigungen:

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

Jeder Alarm hat ein eigenes Attribut mit dem Wert, der als Alarm Schließzeitperiode verwendet wird.

Aus irgendeinem Grund funktioniert das Schließen der Warnung nicht.

Answer 1

$(this) wurde innerhalb der setTimeout Bereich geändert. Cache es in einer Variablen. that in meinem Beispiel.

$(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); 
    }); 
}); 

ARBEITS 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>