Question

我想在网络表单上添加三个按钮。每个按钮都有自己的ID。当我单击一个按钮时，我希望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

使用custom data attributes

<强>标记

<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访问自定义属性。

Answer 3

如果你对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();
})

如何将按钮elementId作为参数捕获到函数中

3 个答案: