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

【问题标题】：How to clean button click source code written in javascript and jquery?如何清理用 javascript 和 jquery 编写的按钮单击源代码？
【发布时间】：2021-12-13 05:56:25
【问题描述】：

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

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

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

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

此源代码运行良好，但似乎不是一个好方法。

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

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

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

【问题讨论】：

如果代码有效并且您正在寻找改进它的建议，Code Review 是合适的地方。但请先查看codereview.meta.stackexchange.com/questions/5777/…。
禁用函数结束事件的按钮？以btn1为例，点击btn1然后运行btn1Function，再运行btn1FunctionEndEvent函数？
我正在使用翻译器，所以语法不好。点击btn1时，执行btn1Function，当btn1Function结束时，执行btn1FunctionEndEvent的函数。

标签： javascript jquery dry

【解决方案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()"));
        });
    });

来源：

:button Selector

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

jQuery.when()

【讨论】：

【解决方案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;
  }
});

【讨论】：

【解决方案3】：

是的。你可以这样做

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

【讨论】：