使用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
    })
});