如何解决更改未点击按钮的按钮不透明度
嗨,我有一个关于如何更改按钮列表的不透明度的问题,如果单击某个按钮,其余按钮的不透明度将更改为 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>
解决方法
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。