Html 在重定向到不同功能的同一功能上使用多个按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18410341/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using multiple buttons on same function that redirects to different functions
提问by sritno
So..i'm having this problem for couple of days not knowing how to do this,and i need help.
所以..我有这个问题几天不知道如何做到这一点，我需要帮助。
I have multiple buttons and clicking all of them is redirecting me to same function and from that function is going to another function specified for that button. Any idea how can i go true couple of functions knowing which button is clicked? example :
我有多个按钮，单击所有按钮会将我重定向到相同的功能，并且从该功能转到为该按钮指定的另一个功能。知道我怎样才能知道点击了哪个按钮才能实现真正的几个功能吗？例子 ：
<html>
<button type="button" onclick="myFunction()" id="1">Button1</button>
<button type="button" onclick="myFunction()" id="2">Button1</button>
<button type="button" onclick="myFunction()" id="3">Button1</button>
<script>
function myFunction()
{
var x=0;
if (button 1){
x=1;
myFunction1(x);}
if (button 2){
x=2;
myFunction2(x);}
if (button 3){
x=3;
myFunction3(x);}
...
myFunction3(x){
alert(x);
}
}
</script>
</html>
回答by Joe Enos
Easiest way would probably be to pass in the element into the function:
最简单的方法可能是将元素传入函数：
<button type="button" onclick="myFunction(this)" id="1">Button1</button>
<button type="button" onclick="myFunction(this)" id="2">Button1</button>
<button type="button" onclick="myFunction(this)" id="3">Button1</button>
function myFunction(elem) {
alert(elem.id);
}
No need to think about event arguments or anything like that.
无需考虑事件参数或类似的东西。
回答by David says reinstate Monica
At its simplest:
最简单的：
<button type="button" onclick="myFunction(this)" id="1">Button1</button>
<button type="button" onclick="myFunction(this)" id="2">Button1</button>
<button type="button" onclick="myFunction(this)" id="3">Button1</button>
function myFunction (button) {
var x = button.id;
switch (x) {
case '1':
myFunction1(x);
break;
case '2':
myFunction2(x);
break;
case '3':
myFunction3(x);
break;
default:
return false;
}
}
Though I'd amend the above to use unobtrusive JavaScript, moving the JavaScript event-handling from the elements' HTML mark-up:
虽然我会修改上面的内容以使用不显眼的 JavaScript，但将 JavaScript 事件处理从元素的 HTML 标记移开：
var buttons = document.getElementsByTagName('button');
for (var i = 0, len = buttons.length; i < len; i++) {
buttons[i].onclick = function (){
myFunction (this);
}
}
Or, to make it even easier (and add the event-handling to one element, rather than three):
或者，让它更容易（并将事件处理添加到一个元素，而不是三个）：
function myFunction (event) {
var x = event.target.id;
console.log(event.target, x);
switch (x) {
case '1':
myFunction1(x);
break;
case '2':
myFunction2(x);
break;
case '3':
myFunction3(x);
break;
default:
return false;
}
}
var parent = document.getElementById('parentElementID');
parent.addEventListener('click', myFunction);
Incidentally, while it's valid (under HTML 5, notunder HTML 4) to have an idthat starts with a numeric character (0-9), in CSS it's difficult to target those elements (leading numeric characters require escaping, in any one of various ways); so it's still advisable to have a predictable alphabetic prefix to those ids.
顺便说一句，虽然以数字字符 (0-9) 开头是有效的（在 HTML 5 下，而不是在 HTML 4 下id），但在 CSS 中很难定位这些元素（前导数字字符需要转义，在各种方法）; 所以仍然建议为那些ids设置一个可预测的字母前缀。
References:
参考：
回答by Grim...
IF you can change the HTML, try:
如果您可以更改 HTML，请尝试：
<button type="button" onclick="myFunction(1)" id="1">Button1</button>
<button type="button" onclick="myFunction(2)" id="2">Button1</button>
<button type="button" onclick="myFunction(3)" id="3">Button1</button>
And change your JS to:
并将您的 JS 更改为：
function myFunction(bnum)
{
var x=0;
if (bnum == 1){
x=1;
myFunction1(x);}
if (bnum == 2){
x=2;
myFunction2(x);}
if (bnum == 3){
x=3;
myFunction3(x);}
}
It's a bit nicer in a switch:
在 switch 中更好一点：
function myFunction(bnum)
{
var x=0;
switch (bnum) {
case 1:
x = 1;
myFunction1(x);
break;
case 2:
x = 2;
myFunction1(x);
break;
case 3:
x = 3;
myFunction1(x);
break;
}
}
回答by alessandrio
you could put
你可以把
var button = document.getElementsByTagName("button"),
len = button.length,
i;
function click(){
alert(this.id);
}
for(i=0;i<len;i+=1){
button[i].onclick=click;
}<button type="button" id="1">Button1</button>
<button type="button" id="2">Button1</button>
<button type="button" id="3">Button1</button>