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，我不知道如何在旧版本中使用它。

编辑：这是一个Fiddle来演示。

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

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

4 个答案: