Javascript 如何使用多个ID重构此颜色更改

我怎样才能让香草JS更简单？目前它是相似元素的4倍：

function display_clear(){
    red = document.getElementById("red");
    red.style.backgroundColor = default_shadow;
    red.style.boxShadow = default_background;
    blue = document.getElementById("blue");
    blue.style.backgroundColor = default_shadow;
    blue.style.boxShadow = default_background;
    green = document.getElementById("green");
    green.style.backgroundColor = default_shadow;
    green.style.boxShadow = default_background;
    orange = document.getElementById("orange");
    orange.style.backgroundColor = default_shadow;
    orange.style.boxShadow = default_background;

---

正如评论中所建议的那样，只需使用这样的函数即可

function colorChange(elId, bg, shadow) {
}

然后在函数中描述要使用这些值执行的操作，然后根据需要多次调用它。

试试这个

    function setStyle(element_id) {
       var element = document.getElementById(element_id);
       element.style.backgroundColor = default_shadow;
       element.style.boxShadow = default_background;
    }
    function display_clear(){
        ["red", "blue", "green","orange"].forEach(element_id=> setStyle(element_id))
    }

---

就像@Bergi所说的：使用带有参数的函数，然后多次调用它

挑战在于识别可按原样重复的代码部分，而不是参数应重复的代码部分。“原样”部件可以移动到具有所述参数的功能中。只能根据应用程序的需要做出此决定

如果总是要为元素列表设置相同的颜色和阴影，可以编写：

function setDefaultAttributes(elementId){
    let box = document.getElementById(elementId);
    box.style.backgroundColor = default_background;
    box.style.boxShadow = default_shadow;
}

// Calling same function multiple times for each color
function display_clear(){
    setDefaultAttributes("red");
    setDefaultAttributes("blue");
    setDefaultAttributes("green");
    setDefaultAttributes("orange");
}

// Alternate: Calling same function for each element of the array
// using the forEach loop    
function display_clear(){
    ["red", "blue", "green", "orange"].forEach(function(element)){
        setDefaultAttributes(element);
    });
}

function setBoxAttributes(id, shadow){
    let box = document.getElementById(id);
    box.style.backgroundColor = default_background;
    box.style.boxShadow = shadow;
}

function display_clear(){
    setBoxAttributes("red", default_shadow);
    setBoxAttributes("blue", default_shadow);
    setBoxAttributes("green", default_shadow);
    setBoxAttributes("orange", orange_shadow);
} 

function setBoxAttributes(id, bgColor, shadow){
    let box = document.getElementById(id);
    box.style.backgroundColor = bgColor;
    box.style.boxShadow = shadow;
}

function display_clear(){
    setBoxAttributes("red", default_shadow, default_background);
    setBoxAttributes("blue", blue_shadow, default_background);
    setBoxAttributes("green", default_shadow, green_background);
    setBoxAttributes("orange", default_shadow, default_background);
}

如果总是要为所有

框

元素设置相同的颜色，但不设置阴影，则仅代码中的

默认背景

应放置在函数中，阴影将成为参数

假设函数可以访问默认的_背景变量，则可以编写：

function setDefaultAttributes(elementId){
    let box = document.getElementById(elementId);
    box.style.backgroundColor = default_background;
    box.style.boxShadow = default_shadow;
}

// Calling same function multiple times for each color
function display_clear(){
    setDefaultAttributes("red");
    setDefaultAttributes("blue");
    setDefaultAttributes("green");
    setDefaultAttributes("orange");
}

// Alternate: Calling same function for each element of the array
// using the forEach loop    
function display_clear(){
    ["red", "blue", "green", "orange"].forEach(function(element)){
        setDefaultAttributes(element);
    });
}

function setBoxAttributes(id, shadow){
    let box = document.getElementById(id);
    box.style.backgroundColor = default_background;
    box.style.boxShadow = shadow;
}

function display_clear(){
    setBoxAttributes("red", default_shadow);
    setBoxAttributes("blue", default_shadow);
    setBoxAttributes("green", default_shadow);
    setBoxAttributes("orange", orange_shadow);
} 

function setBoxAttributes(id, bgColor, shadow){
    let box = document.getElementById(id);
    box.style.backgroundColor = bgColor;
    box.style.boxShadow = shadow;
}

function display_clear(){
    setBoxAttributes("red", default_shadow, default_background);
    setBoxAttributes("blue", blue_shadow, default_background);
    setBoxAttributes("green", default_shadow, green_background);
    setBoxAttributes("orange", default_shadow, default_background);
}

如果要在不同情况下设置不同的颜色/阴影组合，则可以编写：

function setDefaultAttributes(elementId){
    let box = document.getElementById(elementId);
    box.style.backgroundColor = default_background;
    box.style.boxShadow = default_shadow;
}

// Calling same function multiple times for each color
function display_clear(){
    setDefaultAttributes("red");
    setDefaultAttributes("blue");
    setDefaultAttributes("green");
    setDefaultAttributes("orange");
}

// Alternate: Calling same function for each element of the array
// using the forEach loop    
function display_clear(){
    ["red", "blue", "green", "orange"].forEach(function(element)){
        setDefaultAttributes(element);
    });
}

function setBoxAttributes(id, shadow){
    let box = document.getElementById(id);
    box.style.backgroundColor = default_background;
    box.style.boxShadow = shadow;
}

function display_clear(){
    setBoxAttributes("red", default_shadow);
    setBoxAttributes("blue", default_shadow);
    setBoxAttributes("green", default_shadow);
    setBoxAttributes("orange", orange_shadow);
} 

function setBoxAttributes(id, bgColor, shadow){
    let box = document.getElementById(id);
    box.style.backgroundColor = bgColor;
    box.style.boxShadow = shadow;
}

function display_clear(){
    setBoxAttributes("red", default_shadow, default_background);
    setBoxAttributes("blue", blue_shadow, default_background);
    setBoxAttributes("green", default_shadow, green_background);
    setBoxAttributes("orange", default_shadow, default_background);
}

---

通过更改元素，可以在此处使用for循环

var elements = ["red","blue","green","orange"]; // make an array of elements name 
for(var i=0;i<elements.length;i++){
    var elem = document.getElementById(elements[i]);   // getting all elemennts one by one
    elem.style.backgroundColor = default_shadow;
    elem.style.boxShadow = default_background;
}

---

当试图重构一遍又一遍做着同样事情的代码时，你必须问自己这样一个问题：“我重复的指令是什么，变量是什么？”

在这种特殊情况下，这组指令是重复的，这意味着它可以被隔离。现在你必须考虑变量。唯一的变化因素是颜色的名称（作为字符串）。然后，您可以编写一个函数，该函数将完成这组特定的任务，并考虑到各种因素：

function setBackground (color) {
  let element = document.getElementById(color);
  element.style.backgroundColor = default_shadow;
  element.style.boxShadow = default_background;
}

然后您可以调用函数4次，这将执行完全相同的代码

setBackground("red");
setBackground("blue");
setBackground("green");
setBackground("orange");

但是，我认为这是一个错误的做法，因为代码又被重复了一遍。如果在将来的某个时候，颜色会发生变化，那么您必须在代码中找到调用此函数的特定位置，并在调用该函数的位置修改颜色这通常被视为bas实践。您希望使用此数据将数据与代码隔离

你有一个颜色列表。你会想到的是：我可以把这些颜色组合成一个数组！是的，在这种情况下，我认为这是最好的解决方案

// where you define the constants being used by your code
let colors = ["red", "blue", "green", "orange"];

// somewhere else, where you want to call setBackgound()
colors.forEach(color => {
  setBackground(color);
});

这样，如果您需要添加颜色，或者可能需要更改逻辑：您现在可以从服务器获取颜色，因为这就是您的应用程序现在的工作方式。使用数据的零件将保持不变：逻辑将保持不变。您只需更改获得颜色的方式。

试试以下方法：

function display_clear() {
  var colors = ['red', 'blue', 'green', 'orange'];
  var default_shadow = 'red';
  var default_background = 'yellow';
  colors.forEach((color) => {
    console.log(color);
    var element = document.getElementById(color);
    element.style.backgroundColor = default_shadow;
    element.style.boxShadow = default_background;
  });
}

---

我试过了，但你们的解决方案似乎更简洁：

function display_clear(){
  var colours = ["red", "green", "blue", "orange"];
  var x;
  for (x = 0; x <= colours.length; x++){
      colour = document.getElementById(colours[x]);
      colour.style.backgroundColor = default_background;
      colour.style.boxShadow = default_shadow;
  }

功能显示\u清除（）{
变量颜色=[“红色”、“绿色”、“蓝色”、“橙色”]；
var x；
对于（x=0；x）使用带参数的函数，然后调用它四次。新手疑问：为什么我们不需要
var element=document.getElementById
？我的意思是，
element=document.getElementById
如何工作？“试试这个”不是描述。也总是声明变量！有人能帮助理解
color=document.getElementById
在不定义变量
color
的情况下是如何工作的吗？