Плагин jQuery, сохраняйте ссылку на оригинальный элемент

Question

Плагин jQuery, сохраняйте ссылку на оригинальный элемент

0

Я пишу плагин jQuery, который создает элемент div под элементом body. Мне нужно отслеживать этот элемент внутри этого экземпляра плагина.

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

Сначала я просто добавил его под выбранный элемент, но это вызвало проблемы со столами.

Одним из решений будет счетчик внутри самого модуля, который динамически добавляет идентификаторы или классы к выбранным и созданным элементам, но я не знаю, как сохранить переменную static внутри плагина jQuery.

Любая помощь приветствуется!

Dan Lee 25 сен. 2013, в 16:01

Источник

Теги:

javascript

jquery

dom

jquery-plugins

1 ответ

Ещё вопросы

Anton · Accepted Answer · 2013-09-25T12-33-00.000Z

Используйте.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

Проблема в том, что могут быть и «анонимные» элементы без идентификаторов.
Это было бы слишком общим, но вроде как да. Например: $('#results').find('tbody').loadOverlay() . И это tbody не имеет идентификатора.
используя затем $ ('# results'). find ('tbody') добавит "resultstbody" в качестве класса к наложенному примечанию, чтобы уничтожить его, вы должны использовать тот же селектор, что и $ ('# results'). find ('tody ') .loadOverlay (' уничтожить ');
Спасибо за ваше предложение и время, но что, если у меня их было несколько? Я думаю, мне нужны уникальные имена или что-то. Но я не знаю, как поделиться идентификатором, например, для нескольких экземпляров (в рамках плагина)
Если вы добавили оверлей с тем же селектором и попытались уничтожить его, я думаю, что он затем удалит все наложения, РЕДАКТИРОВАТЬ. Но вы можете использовать: last в remove, чтобы удалить самое последнее наложение с тем же селектором (имя класса оверлея)
Как этот jsfiddle.net/QRQpP/2 несколько раз нажмите на добавление наложения, затем удалите наложение, оно удалит последнее наложение с этим селектором
Это, к сожалению, не работает во всех случаях. Мне нужно несколько оверлеев для многих элементов. Смотрите этот jsFiddle для демонстрации. Сначала добавьте несколько оверлеев с первой и второй кнопкой. А потом попробуй удалить. Некоторые созвездия, кажется, ломают эту конструкцию.
@DanLee Это потому, что моя функция onclick была привязана к кнопке: первая и кнопка: последняя попытка jsfiddle.net/QRQpP/5
Хорошо, я догадался, что было более низкоуровневое решение, но сейчас это будет сделано. Спасибо!