在相同功能上使用多个按钮，重定向到不同的功能

所以..我有这个问题几天不知道如何做到这一点，我需要帮助。在相同功能上使用多个按钮，重定向到不同的功能

我有多个按钮，然后点击所有按钮将我重定向到相同的功能，并从该功能转到为该按钮指定的另一个功能。任何想法我怎么能真正知道哪个按钮被点击的功能几个？例如：

<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>

来源

2013-08-23 sritno

感谢你的快速反应:) – sritno

我会带开关/情况下，尝试它，然后做一个变量每个按钮的情况下，过去的到其他功能？我有大约10个不同的功能，其中一些正在使用每个按钮一些有几个不同的按钮 – sritno

最简单的w ay可能会将元素传递到函数中：

<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); 
}

不需要考虑事件参数或类似的事情。

来源

2013-08-23 19:22:35

thx..this帮助:) – sritno

@sritno：你意识到你接受了一个答案，重复我的*第一*部分自己的答案，对吧？我很失去接受，但在这种情况下似乎有点荒谬。 –

，如果你可以改变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>

，改变你的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);} 
}

这是一个开关更好一点：

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; 
    } 
}

来源

2013-08-23 19:21:31

在最简单的：

<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; 
    } 
}

JS Fiddle demo。

虽然我修改上述使用非侵入式JavaScript，从移动元素HTML标记JavaScript的事件处理：

var buttons = document.getElementsByTagName('button'); 
for (var i = 0, len = buttons.length; i < len; i++) { 
    buttons[i].onclick = function(){ 
     myFunction (this); 
    } 
}

JS Fiddle demo。

或者，以使其更容易（并添加事件处理到一个元素，而不是三个）：

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);

JS Fiddle demo。

顺便提一下，虽然它是有效的（在HTML 5，不下HTML 4）有一个id以数字字符（0-9）开始，在CSS很难针对这些元素（主要数字字符需要以各种方式逃脱）;因此对于那些id s，建议使用可预测的字母前缀仍然是可取的。

参考文献：

来源

2013-08-23 19:22:47

+1我正在想的很多，但你输入得更快。也就像让代码离开标记的建议一样。是的，使id为字母数字，而不仅仅是数字。 –

@Mark：非常感谢！ =） –

你可以把

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>

来源

2017-05-19 02:13:01 AvrilAlejandro

在相同功能上使用多个按钮，重定向到不同的功能

回答

相关问题