javascript - Javascript：根据单击的按钮运行脚本

Question

有人可以启发我吗？我试图实现一个简单的 Javascript 函数。这个想法是，根据单击的按钮运行条件脚本。似乎无法弄清楚这一点：

<script type="text/javascript">

function whichButton(){

if(//Button 1 is clicked...){
    //Run script 1   
 }
else if(//Button 2 is clicked){
    //Run script 2  
 }
else if(//Button 3 is clicked){
    //Run  script 3  
 }
else if(//Button 4 is clicked){
    //Run script 4  
 }
else{
    //Do nothing
 }
}
</script>

<form id="form1" onSubmit="whichButton();">
<button id="btn1">Button 1</button><br/>
<button id="btn2">Button 2</button><br/>
<button id="btn3">Button 3</button><br/>
<button id="btn4">Button 4</button><br/>
</form>

提前致谢！

Answer 1

您想将 onclick 处理程序添加到按钮标签：

<script type="text/javascript">    
function whichButton(buttonElement){
  alert(buttonElement.id);
  var buttonClickedId = buttonElement.id;
  if( buttonClickedId === 'btn1' ){
     // do btn1 stuff
  }
  else if( buttonClickedId === 'btn2' ){
     // do btn2 stuff
  }
  // ...
  else{
     // don't know which button was clicked
  }

}
</script>

<form id="form1" >
<button id="btn1" onclick="whichButton(this)">Button 1</button><br/>
<button id="btn2" onclick="whichButton(this)">Button 2</button><br/>
<button id="btn3" onclick="whichButton(this)">Button 3</button><br/>
<button id="btn4" onclick="whichButton(this)">Button 4</button><br/>
</form>

编辑：

要根据单击的按钮运行不同的代码，请使用类似于我在上面编辑的原始帖子的 IF 语句。// 你可以去掉那个警报，或者进入每个 if/else if 范围。

Answer 2

将 from 传递给您的函数，然后找到活动元素：

<form id="form1" onSubmit="whichButton(this);">
    Buttons...
</form>

和 JavaScript：

function whichButton(form) {
    var clicked = form.querySelector(":active");
    switch(clicked.id) {
    case "btn1":
        // do stuff
        break;
    // add more cases
    }
}

请注意，我对此不确定，但我已经对其进行了测试，它似乎可以工作。请注意，IE7 及更早版本不支持:active，我不知道如何在这些旧版本中使其工作。

编辑：这是一个要演示的小提琴。

Answer 3

您可以尝试使用 jQuery 进行以下操作：

<script type="text/javascript">
        $(document).on("click", "button.btn", function(){
                console.log("You clicked " + $(this).html());
                return false;
        });
</script>
<form>
<button class="btn">Button 1</button><br/>
<button class="btn">Button 2</button><br/>
<button class="btn">Button 3</button><br/>
<button class="btn">Button 4</button><br/>
</form>

Answer 4

使用 AJAX 获取脚本，将它们插入 DOM 中的某个位置，然后使用 initialize() 运行它们。

$.get('js/script1.js', function(data) {
    $('#dummydiv').html(data);
    initialize();
});