Javascript jQuery插件，保留对原始元素的引用

我正在编写一个jQuery插件，它在body元素下创建一个div元素。我需要跟踪插件实例中的这个元素

$.fn.loadOverlay = function(command) {
  return this.each(function() {
    var container = $(this);

    if (typeof command != 'undefined' && command === 'destroy') {
      // remove the referenced DOM node
      return;
    }

    // somehow I need to keep a reference from the plugin instance to this created DOM node
    var overlay = $('<div>').css({
      width: container.outerWidth(true),
      height: container.height() + 1,
      top: container.position().top - 1,
      left: container.position().left
    }).addClass('overlay');

    // this is now globally appended without any reference to this plugin instance
    $('body').append(overlay);
  });
};

起初，我只是将其附加到所选元素下面，但这会给表带来麻烦

一种解决方案是在插件本身内部设置一个计数器，动态地将ID或类添加到所选和创建的元素中，但我不知道如何在jQuery插件中保持变量的静态

---

感谢您的帮助

使用.selector并将其作为类添加到覆盖

$.fn.loadOverlay = function(command) {
    var selector = $(this).selector.replace("#",'').replace('.','').replace(/ /g,'');

使用选择器将其拆下

if (typeof command != 'undefined' && command === 'destroy') {
      $('.overlay.'+selector).remove() //here
      return;
}

并将选择器作为类添加到覆盖中

var overlay = $('<div>').css({
      width: container.outerWidth(true),
      height: container.height() + 1,
      top: container.position().top - 1,
      left: container.position().left
    }).addClass('overlay ' + selector); //here

---

问题是可能还有一些没有ID的“匿名”元素，比如$（'div'）.loadOverlay（）？这太笼统了，但有点像是。例如：

$（“#结果”）.find（'tbody'）.loadOverlay（）

。而这个

tbody

没有ID。使用then$（'#results'）.find（'tbody'）将把“resultstbody”作为一个类添加到覆盖注释中以销毁它。您必须使用相同的选择器so$（'#results'）。find（'tody'）。loadOverlay（'destroy'）；谢谢你的建议和时间，但是如果我有多个呢？我想我需要唯一的名字或者别的什么。但我不知道如何在多个实例（在插件范围内）上共享一个ID

var overlay = $('<div>').css({
      width: container.outerWidth(true),
      height: container.height() + 1,
      top: container.position().top - 1,
      left: container.position().left
    }).addClass('overlay ' + selector); //here

$.fn.loadOverlay = function(command) {
    var selector = $(this).selector.replace("#",'').replace('.','').replace(/ /g,'');
    alert(selector);
  return this.each(function() {
    var container = $(this);

    if (typeof command != 'undefined' && command === 'destroy') {
      $('.overlay.'+selector).remove()
      return;
    }
    // somehow I need to keep a reference from the plugin instance to this created DOM node
    var overlay = $('<div>').css({
      width: container.outerWidth(true),
      height: container.height() + 1,
      top: container.position().top - 1,
      left: container.position().left
    }).addClass('overlay ' + selector);
    // this is now globally appended without any reference to this plugin instance
    $('body').append(overlay);
  });
};

$('#someElement').loadOverlay();
$('#sameElement').loadOverlay('destroy'); //removes overlay connected to the selector element