Javascript jQuery 多个按钮和点击事件

Question

我正在把有很多按钮的东西放在一起，每个按钮做不同的事情。

我的做法是这样的:

$( "#somebutton" ).click(function() { 
    //Do something    
});

$( "#someotherbutton" ).click(function() { 
    //Do something else         
});   

$( "#someotherbutton" ).click(function() { 
    //Do something else         
}); 

$( "#someotherbutton" ).click(function() { 
    //Do something else         
});

...等等...

我的问题是...

有没有更好的方法来做到这一点，例如，有一个带有按钮 ID 的数组，并在点击事件后调用此函数？

Answer 1

如果您将按钮及其相应的 click 回调函数存储在数组/对象结构中，您可以压缩它，然后制作一个通用函数以在正确的时间调用每个:

$( "button" ).click(function(evt) { 
    // this binding is lost inside of forEach
    var id = this.id;
    // Loop over each stored object in the array...
    var result = buttonsAndFunctions.forEach(function(obj){
      // If the current object.button matches the button.id, invoke the function
      // Since the function won't directly recieve the event, we'll pass the event
      // to the function:
      (obj.button === id) ? obj.fn(evt) : "";
    });
});


var buttonsAndFunctions = [
  // I'm using the same function for each button here only for demonstration
  // In reality, they'd each be different
  { button : "btn1", fn : function(evt){ console.log(evt.target.id + " was clicked"); } },
  { button : "btn2", fn : function(evt){ console.log(evt.target.id + " was clicked"); } },
  { button : "btn3", fn : function(evt){ console.log(evt.target.id + " was clicked"); } },
  { button : "btn4", fn : function(evt){ console.log(evt.target.id + " was clicked"); } }
]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>
<button id="btn4">Button 3</button>