Question

我正在编写一个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);
  });
};

用法类似于

$('#someElement').loadOverlay(); // create the overlay
// ...
$('#someElement').loadOverlay('destroy'); // destroy the overlay

起初我只是将它附加在所选元素下面，但这会导致表格出现问题。

一个解决方案是插件内部的一个计数器，它会动态地将ID或类添加到选定和创建的元素中，但我不知道如何在jQuery插件中保持变量static。

感谢任何帮助！

Answer 1

使用.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

完整代码

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

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

1 个答案: