Question

所以..我有几天不知道怎么做这个问题，我需要帮助。

我有多个按钮并单击所有按钮将我重定向到相同的功能，并从该功能转到另一个为该按钮指定的功能。知道我怎么能知道哪些功能知道单击了哪个按钮？例如：

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

Answer 1

最简单的方法可能是将元素传递给函数：

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

无需考虑事件参数或类似事件。

Answer 2

最简单的方法：

<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具有可预测的字母前缀仍然是可取的。

参考文献：

Answer 3

如果您可以更改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;
   }
}

Answer 4

你可以把

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>

Answer 5

我刚刚发送了一个数字作为参考..

<button type="button" onclick="myFunction(1)">Button1</button>

然后在函数处

function whatever(v){
  if (v == 1){
    //dot stuff..
  }
}

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

5 个答案: