如何清理用javascript和jquery撰寫的按鈕單擊源代碼？-有解無憂

單擊特定按鈕時，將執行一個功能。

如果將“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");
    ...
});

uj5u.com熱心網友回復：

使用 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;
  }
});

uj5u.com熱心網友回復：

是的。你可以做這樣的事情

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/339340.html

標籤：javascript 查询干燥

上一篇：「保姆級教學」iOS下JDK環境配置

下一篇：將物件陣列轉換為另一個物件陣列