如何使用JavaScript根据块的颜色更改div元素的颜色？

我有2个区块供用户选择，他们应该是互动的。块会更改颜色，垂直线颜色应更改为相反。我想知道我是否可以在相同的代码片段中正确地修改代码块的颜色，因为之前我做了，但是使用了另一个for循环，这不是最快的方法

let vanOption=document.getElementsByClassName（“van quote选项”）；
让quoteVl=document.getElementById（“选项vl”）；
//厢式货车选项选择
对于（var x=0；x0）{
currentOption[0]。className=currentOption[0]。className.replace（“选项处于活动状态，”）；
}  
this.className+=“选项处于活动状态”；
});
}

.van报价选项{
显示器：flex；
对正内容：空间均匀；
利润率：25px165px20px165px；
边框：1px纯灰；
光标：指针；
过渡：0.5s；
}
.选项激活{
背景色：#18A063；
颜色：#fff；
}
.quote vl{
左边框：2个实心#13985C；
高度：116px；
}
.quote vl active{
左边框：2倍实心#fff；
高度：116px；
}
.报价图标{
利润率：25px035px；
}
.quote van icon{
字体大小：49px；
填充：8px；
边界半径：50%；
高度：60px；
背景色：rgb（245245245245）；
颜色：#18A063；
}
.引用汽车图标{
字体大小：49px；
填充：9px；
高度：52px；
背景色：rgb（245245245245）；
颜色：#18A063；
边界半径：50%；
}
.引用自行车图标{
字体大小：49px；
填充：10px；
高度：55px；
背景色：rgb（245245245245）；
颜色：#18A063；
边界半径：50%；
}
.quote-p{
文本对齐：左对齐；
}
.quote-p-van{
文本对齐：左对齐；
边缘顶部：5px；
}
.自行车报价，
.汽车报价{
高度：124px；
}
.报价{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
}
.报价箱{
边缘顶部：10px；
}
.van send price，
.汽车发送价格，
.自行车寄价{
字体大小：25px；
字号：700；
}
.van send price：：之前，
.汽车发送价格：：之前，
.自行车发送价格：：之前{
内容：“\00A3”；
}

发送1或2件物品（带货车）


我们最多为您带两件物品

在任何地点立即交付。
14

对于最大值

共2项。
租一辆面包车


我们最多为您带两件物品

在任何地点立即交付。
38

租一辆面包车，

∞ 项目

您可以使用css解决此问题。
您实际上不需要

quote vl active

类。移除它。
当垂直线处于活动状态时，可以使用

选项active

引用垂直线，因为它是该元素的子元素

.option-active > .quote-vl {
  border-left: 2px solid white;
    height: 116px;
}

---

查看此提琴：

可能希望使用

onclick

而不是添加侦听器

这是一个比较干净的JSFIDLE，垂直条的颜色正好相反：

您可以让CSS控制垂直条：

.quote-vl {
    border-left: 2px solid green;
    height: 116px;
}
.option-active .quote-vl {
    border-left: 2px solid white;
    height: 116px;
}

然后可以清理JS，使其看起来像这样：

function triggerMe(evt) {
  let vanOption = document.getElementsByClassName("van-quote-option");
  [...vanOption].forEach(x => {
    if (x.classList.contains('option-active')) {
      x.classList.remove('option-active');
    }
  })
  evt.classList.toggle('option-active');
}