Question

我有这个标记：

<div plug=tButton></div>

并写了一个小插件，它像这样制作一个div的按钮：

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

我的问题：当只有div（及其plug-attribute）时，如何将相应的插件应用于它（不使用eval）？

应该是这样的：

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

但显然不起作用。

THX。

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

鉴于您的加价，如果您尝试应用tButton()插件，我认为您只是这样做：

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

Answer 3

我想你想要这个

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

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

});

但这可能不是在性能方面做事的最佳方式。我建议使用CSS类来标识要将插件应用到的元素，然后使用适当的类选择器调用返回的集合上的插件函数。例如，如果元素始终是<div>个元素

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

Answer 4

我不太明白你要做什么，但最好的猜测是：

您正在使用自定义属性设置这些div，并使用jQuery
- 将它们设为按钮
- 向他们添加互动行为

我已经尝试根据您的问题提供解决方案，但如果我理解您正在做什么，似乎更简单的方法就是：

为您的元素提供不同的类，而不是像plug=
使用CSS来处理像按钮一样的样式。考虑使用实际的button元素而不是div
使用jQuery和您的自定义插件（如果您愿意）添加您想要的任何行为

这是否有意义，或者我错过了什么？

Answer 5

你几乎拥有它。你只需要调用你查找的功能。这样做：

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

jQuery：动态应用插件

5 个答案: