如何在 JavaScript function 中创建对按钮的引用以避免重复？

Question

我有一个 function，我在其中管理两组按钮。 function 的大约一半只是为prevButtonB重复相同的内容，就像我已经为prevButtonA所做的一样。

我如何在不重复自己两次的情况下在纯 JavaScript 中创建这个 function？

function buttonListener( btn ) {
    var sameButton = false;

    if (btn.loc == "start") {
        if (prevButtonA) {
            prevButtonA.style.backgroundColor = "blue";
            if (prevButtonA == btn) {
                prevButtonA = null;
                sameButton = true;
            } else {
                prevButtonA = btn;
            }
        } else {
            prevButtonA = btn;
        }
    } else { // EVERYTHING BELOW IS JUST REPEATING THE SAME AS ABOVE.
        if (prevButtonB) {
            prevButtonB.style.backgroundColor = "blue";
            if (prevButtonB == btn) {
                prevButtonB = null;
                sameButton = true;
            } else {
                prevButtonB = btn;
            }
        } else {
            prevButtonB = btn;
        }
    } // END OF REPEATING CODE.

    console.log( "prevButtonA", prevButtonA );
    console.log( "prevButtonB", prevButtonB );

    if (sameButton == false) {
        btn.style.backgroundColor = "green";
        myFunction();
    }
}

根据要求，我的尝试如下。 这样，我尝试创建对我尝试访问的任何prevButtonA/B的引用，但此方法不会将先前按下的按钮的颜色设置回蓝色。

function buttonListener( btn ) {
    var sameButton = false;
    var whichBtn;

    if (btn.loc == "start") {
        whichBtn = prevButtonA;
    } else {
        whichBtn = prevButtonB;
    }

    if (whichBtn) {
        whichBtn.style.backgroundColor = "blue";
        if (whichBtn == btn) {
            whichBtn = null;
            sameButton = true;
        } else {
            whichBtn = btn;
        }
    } else {
        whichBtn = btn;
    }

    console.log( "prevButtonA", prevButtonA );
    console.log( "prevButtonB", prevButtonB );

    if (sameButton == false) {
        btn.style.backgroundColor = "green";
        myFunction();
    }
}

Answer 1

我没有测试代码，但您可以使用类似于下面的逻辑来防止代码重复。

function buttonListener( btn ) {
  var sameButton = false;
  var prevButton;
  if (btn.loc == "start") {
    if (prevButtonA) {
      prevButton = prevButtonA;
    }
    if (prevButtonB) {
      prevButton = prevButtonB;
    }
  } else {
    prevButton = btn;
  }
  prevButton.style.backgroundColor = "blue";
  if (prevButton == btn) {
      prevButton = null;
      sameButton = true;
  } else {
      prevButton = btn;
  }
console.log( "prevButtonA", prevButtonA );
console.log( "prevButtonB", prevButtonB );