15

所以..我有这个问题几天不知道如何做到这一点，我需要帮助。

我有多个按钮，单击所有按钮会将我重定向到相同的功能，并且从该功能转到为该按钮指定的另一个功能。知道单击哪个按钮，我如何才能实现真正的几个功能？例子 ：

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

5 回答 5

20

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

<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-23T19:22:35.043 回答
17

最简单的：

<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 小提琴演示。

虽然我会修改上面的内容以使用不显眼的 JavaScript，但将 JavaScript 事件处理从元素的 HTML 标记中移出：

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

JS 小提琴演示。

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

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 小提琴演示。

顺便说一句，虽然它是有效的（在 HTML 5 下，而不是在 HTML 4 下）以id数字字符（0-9）开头，但在 CSS 中很难定位这些元素（前导数字字符需要转义，在任何一种方法）; 所以仍然建议对这些ids 有一个可预测的字母前缀。

参考：

于 2013-08-23T19:22:47.577 回答
0

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

在 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;
   }
}
于 2013-08-23T19:21:31.600 回答
0

你可以把

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-19T02:13:01.613 回答
0

我只是发了一个号码作为参考..

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

然后在函数

function whatever(v){
  if (v == 1){
    //dot stuff..
  }
}
于 2021-02-05T15:51:15.947 回答