如何清理用 javascript 和 jquery 编写的按钮点击源代码？

Question

单击特定按钮时，将执行一个函数。

如果将“活动”添加到按钮的 class，按钮的颜色会发生变化，并向用户显示活动状态。

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

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

此源代码工作正常，但似乎不是一个好方法。

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

是否可以使用面向对象编程来实现它？

$("#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

使用 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 2

是的。你可以这样做

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

Answer 3

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

来源：

:button Selector

Attribute Starts With Selector [name^=”value”]

jQuery.when()

如何清理用 javascript 和 jquery 编写的按钮点击源代码？

How to clean button click source code written in javascript and jquery?

javascript

jquery

dry