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

Question

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

到目前为止，我已经掌握了以下内容，我可以在其中更改已单击但难以实现我上面所说的按钮的不透明度。在 jquery 我知道你可以使用 .not(this) 但不确定如何使用 JS。

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

按钮喜欢这个，很抱歉没有在开始时添加这个

<button class="variantClass">
<span>Button</span> 
</button

var buttonSelector = document.querySelectorAll('button.variantClass');
buttonSelector.forEach(function (el){
  el.addEventListener("click", function(){
    this.style.opacity = "0.5";
  })
});

.variantClass { background: black; color: white; padding: 30px;}

<button class="variantClass">
Button 
</button>
<button class="variantClass">
Button 
</button>
<button class="variantClass">
Button 
</button>
<button class="variantClass">
Button 
</button>
<button class="variantClass">
Button 
</button>
<button class="variantClass">
Button 
</button>

Answer 1

var buttonSelector = document.querySelectorAll('button.variantClass');
buttonSelector.forEach(function (el){
  el.addEventListener("click", function(ev){
    buttonSelector.forEach(function(button) { button.style.opacity = '0.5' })
    this.style.opacity = 1
  })
});

.variantClass { background: black; color: white; padding: 30px;}

<button class="variantClass">
<span>Button</span>
</button>
<button class="variantClass">
<span>Button</span>
</button>
<button class="variantClass">
<span>Button</span>
</button>
<button class="variantClass">
<span>Button</span>
</button>
<button class="variantClass">
<span>Button</span>
</button>
<button class="variantClass">
<span>Button</span>
</button>

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

Change button opacity of buttons that are not clicked

javascript

button

opacity