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

所以..我有這個問題幾天不知道如何做到這一點，我需要幫助。在相同功能上使用多個按鈕，重定向到不同的功能

我有多個按鈕，然後點擊所有按鈕將我重定向到相同的功能，並從該功能轉到爲該按鈕指定的另一個功能。任何想法我怎麼能真正知道哪個按鈕被點擊的功能幾個？例如：

<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

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

回答

相關問題