javascript - 使用 jQuery 更改元素不透明度

Question

单击一个按钮后，我需要更改所有按钮的不透明度（单击的按钮除外）。

这是HTML代码：

<button data-target="Section1" class="metro-button">Button1</button>
<button data-target="Section2" class="metro-button">Button2</button>
<button data-target="Section3" class="metro-button">Button3</button>

和 jQuery 代码：

$(".metro-button").click(function(){
    var buttons = document.getElementsByClassName("metro-button");
    for(i = 0 ; i < buttons.length ; i++) {
      if ($(this).attr('data-target') != buttons[i].attr('data-target')) {
            buttons[i].animate({"opacity" : 0.3});
       }
    }
});

JsFiddle 中的演示。

问题是什么 ？

任何想法，将不胜感激。

Answer 1

坚持使用 jQuery

$(".metro-button").click(function(){
    $(".metro-button").not(this).animate({"opacity" : 0.3});
    $(this).animate({"opacity" : 1});
});

小提琴

Answer 2

也可能是一个解决方案，具体取决于您的 HTML 结构：

演示

$(".metro-button").click(function () {
    $(this).animate({
        "opacity": 1
    }).siblings('.metro-button').animate({
        "opacity": .3
    })
});