When a specific button is clicked, a function is executed.

If "active" is added to the button's class, the button's color changes and the active state is displayed to the user.

And each function has an end event.

Disables the button on the function's end event.

This source code works fine, but it doesn't seem like a good way to do it.

Is there a cleaner and better way?

Is it possible to implement this using object oriented programming?

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

CodePudding user response：

With jQuery you can add events to multiple elements

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

CodePudding user response：

Yep. You can do something like this

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

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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

Sources:

:button Selector

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

jQuery.when()