如何清洁按钮点击在javascript和jquery编写的源代码?

Question

当一个特定的按钮被点击时，一个函数被执行。

如果"active"被添加到按钮的类中，按钮的颜色会改变，并且活动状态会显示给用户。

每个函数都有一个结束事件。

禁用函数结束事件上的按钮。

这个源代码工作得很好，但它似乎不是一个好的方法。

有没有更干净更好的方法?

有可能实现这使用面向对象的编程?

$("#btn1").on("click", function(e){
$("#btn1").addClass("active");
$("#btn2").removeClass("active");
$("#btn3").removeClass("active");
$("#btn4").removeClass("active");
$("#btn5").removeClass("active");

btn1Function();
});
$("#btn2").on("click", function(e){
$("#btn2").addClass("active");
$("#btn1").removeClass("active");
$("#btn3").removeClass("active");
$("#btn4").removeClass("active");
$("#btn5").removeClass("active");

btn2Function();
});
$("#btn3").on("click", function(e){
$("#btn3).addClass("active");
$("#btn1").removeClass("active");
$("#btn2").removeClass("active");
$("#btn4").removeClass("active");
$("#btn5").removeClass("active");
btn3Function();
});
$("#btn4").on("click", function(e){
$("#btn4").addClass("active");  
$("#btn1").removeClass("active");
$("#btn2").removeClass("active");
$("#btn3).removeClass("active");    
$("#btn5").removeClass("active");

btn4Function();
});
$("#btn5").on("click", function(e){
$("#btn5").addClass("active");
$("#btn1").removeClass("active");
$("#btn2").removeClass("active");
$("#btn3").removeClass("active");
$("#btn4").removeClass("active");

btn5Function();
});
function btn1Function()
{
... 
}
function btn2Function()
{
... 
}
function btn3Function()
{
... 
}
function btn4Function()
{
... 
}
function btn5Function()
{
... 
}

btn1FunctionEndEvent.on("end", function(){
$("#btn1").removeClass("active");
...
});
btn2FunctionEndEvent.on("end", function(){
$("#btn2").removeClass("active");
...
});
btn3FunctionEndEvent.on("end", function(){
$("#btn3").removeClass("active");
...
});
btn4FunctionEndEvent.on("end", function(){
$("#btn4").removeClass("active");
...
});
btn5FunctionEndEvent.on("end", function(){
$("#btn5").removeClass("active");
...
});

Answer 1

Demo Page

// get attribute start with "btn"
$("[id^=btn]").each(function () {
$(this).click(function () {
//remove all occurrence(/g) if its not a digit(^d)
var id = this.id.replace(/[^d]/g, '');
//:button would selects all button elements and elements of type button.
$(':button').removeClass('active');
$("#btn" + id).addClass("active");
//when() function allow you to execute function in sequence.
//eval will allow you to run functions in local scope
$.when(eval("btn" + id + "Function()")).then(eval("btn" + id + "FunctionEndEvent()"));
});
});

来源:

:按钮选择器

属性以选择器开始[name^= " value "]

jQuery.when ()

Answer 2

使用jQuery可以为多个元素添加事件

// store the active button
var activeButton = null;
// Assing the same event handler to all buttons
$(".your-common-button-class").on("click", function (event) {
// toggle the clicked button
event.target.toggleClass("active");
// remove the class active from the previously active button
// it could be the same as the event target, thats why I remove
// the class and not toggle it
if (activeButton) {
activeButton.removeClass("active");
}
if (!event.target.containsClass("active")) {
return;
}
activeButton = event.target;
switch (event.target.id) {
case "btn1":
btn1Function();
break;
case "btn2":
btn2Function();
break;
// And so on...
default:
break;
}
});

Answer 3

是的。你可以这样做

$("#btn4,#btn1,#btn2").addClass("active");