javascript - 如何在一组超时时自动隐藏 div

Question

我的应用程序上有一条闪现消息，如下所示:

这是我的代码片段:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
    function delete_flash(flash){
        $(flash).parent().remove()
    }

</script>

这是我要自动隐藏的 div:

<div class="ui {{ class }} message">
    <i class="close icon" onclick="delete_flash(this)"></i>
       {{ msg }}
</div>

在上面的代码中，我可以在单击关闭图标时关闭 flash 消息。但是现在，我想在设置超时时间后自动隐藏该消息，比如说 5 秒后它会自动隐藏。

如有任何帮助，我们将不胜感激。

编辑:有关更多信息，我关注来自此 Flask 的闪现消息 boilerplate .

Answer 1

• 首先，不要使用 .parent()有一天它可能不再是 parent ，你的 JS 会惨败。使用 .closest('selector')方法。
• 不要使用内联 JS onclick="delete_flash(this)"
• 出于可访问性原因，请使用 <button>而不是 <i> (或者至少使用 Aria role="button" 属性)
• 使用data-autohide="5" (或任何其他数字)在您的消息元素上。

我会建议一个更好的方法，相反，使用事件

$('.message').each((i, el) => {

  const $el = $(el);
  const $xx = $el.find('.close');
  const sec = $el.data('autohide');
  const triggerRemove = () => clearTimeout($el.trigger('remove').T);
  
  $el.one('remove', () => $el.remove());
  $xx.one('click', triggerRemove);
  if (sec) $el.T = setTimeout(triggerRemove, sec * 1000);

});

.message {
  position: relative;
  padding: 1em 2em 1em 1em;
  font: bold 16px/1.4 sans-serif;
  color:            hsl(100, 50%, 40%);
  background:       hsl(100, 95%, 95%);
  border: 2px solid hsl(100, 70%, 70%);
  border-radius: 5px;
}

.message .close{
  position: absolute;
  top: 0;
  right: 0;
  padding: 1em;
  border: 0;
  cursor: pointer;
  background: none;
}

.message .close:after {
  content: '\2716';
  font-style: normal;
}

<div class="ui message" data-autohide="5">
  Successfully added Python course
  <button type="button" class="close icon"></button>
</div>

<div class="ui message" data-autohide="3">
  I will disappear after 3 sec!
  <button type="button" class="close icon"></button> 
</div>

<div class="ui message error">
  I hide only on X click
  <button type="button" class="close icon"></button> 
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

https://api.jquery.com/one/
https://api.jquery.com/trigger/