0

我正在编写一个 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 插件中保持变量静态。

任何帮助表示赞赏！

4

1 回答 1

0

使用 .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
于 2013-09-25T13:39:11.983 回答