Question

我有这个功能：

function flash(msg) {
  var _id = $('#flash_notice__');
  if( _id.length > 0 ) {
   _id.html(msg); 
  } else {
    $('<div id="flash_notice__">'+ msg +'</div>').appendTo('body');
    //$('body').append('<div id="flash_notice__">'+ msg +'</div>');
  }
  setTimeout(function(){
    _id.fadeOut(500, function(){
      $(this).remove(); //or _id.remove();
    });
  }, 2500);
}

第一次（刷新时）消息（msg）保留在页面上，然后当flash（）再次运行时，效果很好。我认为，当_id存在.remove（）它正在工作，但是什么时候创建它仍然在屏幕上的消息。我做错了什么？谢谢。

Answer 1

你基本上回答了自己的问题：

我认为，当_id存在.remove（）它正在工作时，但什么时候创建它仍然在屏幕上的消息

如果查看代码，变量_id仅在消息已在屏幕上时才存在。在您创建它的情况下，该变量不指向任何内容：

var _id = $('#flash_notice__');
...
} else {
  $('<div id="flash_notice__">'+ msg +'</div>').appendTo('body');
}

将您的代码更改为：

function flash(msg) {
  var _id = $('#flash_notice__');
  if( _id.length > 0 ) {
   _id.html(msg); 
  } else {
    _id = $('<div id="flash_notice__">'+ msg +'</div>').appendTo('body');
  }
  setTimeout(function(){
    _id.fadeOut(500, function(){
      $(this).remove(); //or _id.remove();
    });
  }, 2500);
}

元素已在页面上的示例：http://jsfiddle.net/GyUhB/
页面上没有元素的示例：http://jsfiddle.net/GyUhB/1/

Answer 2

尝试：

function flash(msg) {
  var _id = $('#flash_notice__');
  if( !_id.length ) {
    _id = $('<div id="flash_notice__">'+ msg +'</div>').appendTo('body');
  } else {
   _id.html(msg).show();
  }
  setTimeout(function(){
    _id.fadeOut(500, function(){
      $(this).hide();
    });
  }, 2500);
}

注意：.hide()不是.remove()，因此_flash_notice可以在下次重复使用。否则每次都会创建一个新的_flash_notice。

setTimeout（）和remove（）无法按预期工作

2 个答案: