Question

我有许多按钮可以激活页面上的许多功能，但我想知道是否有可以用来减少代码的快捷方式：

HTML：

<button id="button1">button1</button>
<button id="button2">button2</button>

JQuery的：

$('#button1').live('click', // click id button1
    MyCode('#example', function () {
    this.button1(); // fire button1 function
    });
});
$('#button2').live('click', // click id button2
    MyCode('#example', function () {
    this.button2(); // fire button2 function
    });
});

我的问题是：如果有一个值我可以在按钮上设置，可以转移点击并执行其中相同名称的函数...也许使用.data（）？例如，如果我在页面上有50个按钮，则可能会节省大量代码/时间

我搜索过但发现信息有点粗略。

Answer 1

我的问题是：如果有一个值我可以在按钮上设置，可以转移点击...

你已经这样做了：你在按钮上放了一个id：

$(document).on("click", "#button1, #button2", function() {
    var btn = this;
    MyCode('#example', function () {
        this[btn.id]();
    });
});

使用on而不是弃用（和删除）live。如果你使用旧版本的jQuery，那么：

$(document).delegate("#button1, #button2", "click", function() {
     /* ...same content here...*;
});

（请注意，参数顺序与on不同。）

在任何情况下：重点是关闭按钮的id。

您可能更喜欢在按钮上放置一个类，而不必列出选择器中的每个id，例如：

<button id="button1" class="btn">button1</button>
<button id="button2" class="btn">button2</button>

和

$(document).on("click", ".btn", function() {
    var btn = this;
    MyCode('#example', function () {
        this[btn.id]();
    });
});

此外，如果您不想使用id，则可以使用data-*属性：

<button data-func="button1" class="btn">button1</button>
<button data-func="button2" class="btn">button2</button>

和

$(document).on("click", ".btn", function() {
    var btn = this;
    MyCode('#example', function () {
        this[$(btn).attr("data-func")]();
    });
});

...但如果它们是唯一的，那么使用id并没有错。

基于数据过滤器的实时点击的多个功能

1 个答案: