Использование элемента по его идентификатору без предварительного объявления идентификатора

Я пытаюсь использовать элемент по его идентификатору без явного создания ссылки на него.

Http://jsfiddle.net/D8A8P/ 

<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"
4 2
jquery getelementbyid

4 ответа:

Попробуйте использовать attribute starts with selector,

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

Вы можете использовать attribute starts with selector. Попробуйте это: 

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

Демо-версия

1

Ваш пример кода показывает только кнопки, поэтому обработчик может быть просто применен ко всем кнопкам: 

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

Простой селектор должен быть предпочтительнее, чем тот, который использует [id^=..., потому что последний будетискать весь документ .

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

Нет необходимости указывать preventDefault. Боттон не имеет никакого функционального действия по умолчанию

1