Javascript 更改未单击按钮的按钮不透明度

嗨，我有一个问题，我将如何更改按钮列表的不透明度，如果单击一个按钮，其余按钮的不透明度将更改为0.5。而被点击的那个将保持在1

到目前为止，我已经得到了下面的，我可以改变按钮的不透明度，点击，但努力实现我上面所说的。在jquery中，我知道你可以使用.not（this），但不确定如何使用JS

编辑：在我的按钮中，我还有一个保存副本的span标记。当您单击span标记时，这看起来也会导致不透明度问题

Button想要这个，我很抱歉没有在开始时添加这个

按钮

var buttonSelector=document.queryselectoral（'button.variantClass'）；
按钮选择器forEach（功能（el）{
el.addEventListener（“单击”，函数（ev）{
buttonSelector.forEach（函数（按钮）{button.style.opacity='0.5'}）
this.style.opacity=1
})
});
.variantClass{背景：黑色；颜色：白色；填充：30px；}

按钮
按钮
按钮
按钮
按钮
按钮
谢谢@bel3atar的回答，这正是我想要的，但你能解释一下你做了什么，让我从中学习吗？我只需将所有按钮的不透明度设置为0.5，然后将单击按钮的不透明度设置为1谢谢@bel3atar我代码中的最后一个问题我在按钮中有一个span标记，如果你点击“跨度”按钮，不透明度会改变，而不是整个按钮（认为这是因为.target事件），你知道如何解决这个问题吗？所以按钮应该是：按钮I更新了答案，event.target指向被点击的实际元素。由于点击事件最终会出现在按钮前，因此使用
此
解决了问题谢谢@bel3atar在自己做了一些更改后最终自己解决了这个问题，但感谢您的回复和您的回答