Javascript 事件 - 如何使此代码干燥

Question

我正在学习 JavaScript。有人可以帮我使这段代码干燥(不要重复自己)吗？该代码是通过单击特定的connected-with按钮来更改段落的颜色。我不知道如何使 changeColor 函数适用于特定的代码块，而不需要创建该函数的新版本。

var greenPar = document.getElementById("green-paragraph");
var greenColorBtn = document.getElementById("greenColorBtn");
var redPar = document.getElementById("red-paragraph");
var redColorBtn = document.getElementById("redColorBtn");
greenColorBtn.addEventListener("click", changeColorGreen);
redColorBtn.addEventListener("click", changeColorRed);

function changeColorGreen() {
    if (greenPar.className == "") {
        greenPar.className = "green"; //.green{ color:green;}
    } else {
        greenPar.className = "";
    }
}

function changeColorRed() {
    if (redPar.className == "") {
        redPar.className = "red"; //.red{ color:red;}
    } else {
        redPar.className = "";
    }
}

Answer 1

使用通用函数作为点击处理程序并传递颜色值作为参数。

由于您将在处理程序中使用 this 值，因此请使用 Function#bind并传递this-context， 第二个参数是要比较的颜色值。

var greenPar = document.getElementById("green-paragraph");
var greenColorBtn = document.getElementById("greenColorBtn");

var redPar = document.getElementById("red-paragraph");
var redColorBtn = document.getElementById("redColorBtn");

greenColorBtn.addEventListener("click", changeColor.bind(greenColorBtn, 'green'));
redColorBtn.addEventListener("click", changeColor.bind(redColorBtn, 'red'));

function changeColor(color) {
  var thisElem = this;
  if (thisElem.className == "") {
    thisElem.className = color;
  } else {
    thisElem.className = "";
  }
}