Как поймать кнопку elementId как параметр в функцию

Question

Я хочу добавить три кнопки в веб-форму. Каждая кнопка имеет свой идентификатор. Когда я нажимаю кнопку, я хочу, чтобы содержимое div стало видимым, а другие скрыты. Тем не менее, теперь я использую три функции, которые добавляются в качестве события для каждой кнопки. Есть ли умный способ создать одну функцию и добавить elementId в качестве параметра? Я хочу "перехватить" запрашивающий объект.

function myCoolFunction(parameter) {
if(parameter=="button1") {
  hilight("button1");
}
if(parameter=="button2") {
 // do something else for example
}

}

Спасибо,

Answer 1

Попробуйте это:

<input type="button" value="Click Me" id="button1" onClick="myCoolFunction(this.id);" />

Answer 2

Если вы заинтересованы в jquery ...

html

<div id="box_1"></div>
<div id="box_2"></div>
<input type="button" data-id="box_1" />
<input type="button" data-id="box_2" />

js

$("input:button").click(function(e) {
    var id = $(this).attr("data-id"),
    boxes = $(".boxes"),
    boxes.hide().filter("#"+id).show();
    e.preventDefault();
})

Answer 3

Использование пользовательских атрибутов данных

Разметка

<input type="button" value="button one" onClick="myCoolFunction(this)" data-related-div="div_one" />
<div id="div_one" />
<input type="button" value="button two" onClick="myCoolFunction(this)" data-related-two="div_one"/>
<div id="div_two" />
<input type="button" value="button three" onClick="myCoolFunction(this)" data-related-div="div_three" />
<div id="div_three" />

Скрипт

function myCoolFunction(button) {
  highlight(button.dataset.relatedDiv);
}

Обратите внимание, что если вы добавляете новую кнопку, вам не нужно изменять код JavaScript.

Кроме того, это может привести к сбою в дрянных браузерах (например, IE).

Обновление (для тех, ктоне переходил по исходной ссылке):

Атрибут dataset является (на данный момент) только Webkit.Пользовательские атрибуты могут быть доступны с использованием getAttribute и setAttribute во всех современных браузерах.