Question

我尝试按ID使用元素而不显式创建对它的引用。

<button id="btn-1">Show Content A</button>
<button id="btn-2">Show Content B</button>
<button id="btn-3">Show Content C</button>

<div id="content-1">Fancy Pants</div>
<div id="content-2">Small Town</div>
<div id="content-3">Cheap Whiskey</div>

如果用户点击了btn，我想知道点击了哪一个。

$( ??? ).on("click", function (e) {
    e.preventDefault();
    console.log(this.id);
});

// If user clicks on btn-1
// console: "btn-1"

// If user clicks on btn-2
// console: "btn-2"

Answer 1

您可以使用attribute starts with selector。试试这个：

$("button[id^='btn-']").on("click", function (e) {
    e.preventDefault();
    console.log($(this).attr("id"));
});

<强> DEMO

Answer 2

尝试使用attribute starts with selector，

$("[id^='btn-']").on("click", function (e) {
    e.preventDefault();
    console.log(this.id);
});

Answer 3

您的示例代码仅显示按钮，因此处理程序可以简单地应用于所有按钮：

$('button').on('click', function (e) {
    console.log(this.id);
});

一个简单的选择器应优先于使用[id^=...的选择器，因为后者将搜索整个文档。

Answer 4

$("button[id^='btn-']").on("click", function (e) {
    console.log($(this).attr("id"));
});

无需指定preventDefault。按钮没有任何默认的功能操作

使用元素ID，而不先声明ID

4 个答案: