1

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

html:

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

查询：

$('#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 个按钮，这可能会节省大量代码/时间

我已经搜索过，但发现这方面的信息有点粗略。

4

1 回答 1

4

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

你已经这样做了：你在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...但是如果它们是独一无二的，那么使用它们并没有错。

于 2013-06-02T22:44:16.377 回答