JQuery: применить плагин динамически

Question

У меня есть эта разметка:

<div plug=tButton></div>

и написал небольшой плагин, который делает кнопку «уф» div следующим образом:

var cmd = $("[plug]");
cmd.tButton();

мой вопрос: когда у меня есть только div (и его plug-атрибут), как я могу применить к нему соответствующий плагин (без использования eval)?

должно быть как:

var plug = div.attr("plug");
div[plug];

но, очевидно, не работает.

ТНХ.

Answer 1

Я бы подумал об использовании классов, чтобы различать, какие элементы получают какие плагины, и применять их с помощью селекторов. Предполагая, что классы имеют то же имя, что и плагин, вы можете проиндексировать и объект jQuery, чтобы применить его.

$(function() {
   $('.tButton').tButton();
   $('.jButton').jButton();
   ...
});

или

$(function() {
   var plugins = [ 'tButton', 'jButton', ... ];
   $.each(plugins, function(i,val) {
       $('.' + val).each( function() {
          jQuery[val].apply(this);
       });
   });
});

<div class="tButton">...</div>
<div class="jButton">...</div>

Answer 2

У вас почти есть это. Вам просто нужно вызвать функцию, которую вы искали. Сделайте это:

var plug = div.attr("plug");
div[plug]();

Answer 3

Я не совсем понимаю, что вы пытаетесь сделать, но мое лучшее предположение следующее:

• Вы устанавливаете эти div с пользовательскими атрибутами и используете jQuery для
  • Стиль их как кнопки
  • Добавить к ним интерактивное поведение

Я уже пытался предложить решение, основанное на вашем вопросе, но если я понимаю, что вы делаете правильно, кажется, что более простой подход будет следующим:

• Дайте вашим элементам разные классы вместо пользовательских атрибутов, таких как plug=
• Используйте CSS, чтобы позаботиться о стилизации их как кнопок. Попробуйте использовать фактический элемент button вместо div
• Используйте jQuery и ваш пользовательский плагин (если хотите), чтобы добавить любое поведение, которое вы хотите

Имеет ли это смысл, или я что-то упустил?

Answer 4

Я думаю, вы хотите это

$('div[plug]').each(function() {

    var $this = $(this);
    var plugin = $this.attr('plug');
    $this[plugin]();

});

но это, вероятно, не лучший способ сделать что-то с точки зрения производительности. Я бы предложил использовать класс CSS для определения элементов, к которым вы хотите применить ваш плагин, а затем вызвать функцию плагина в коллекции, возвращаемой с использованием соответствующего селектора класса. Например, если элементы всегда <div> elements

$('div.tButton').tButton();

Answer 5

Учитывая вашу разметку, если вы пытаетесь применить свой плагин tButton(), я думаю, вы просто сделаете это:

$("div[plug='tButton']").tButton();
$("div[plug='xButton']").xButton();