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

Demo in JsFiddle.

有什么问题？

任何想法都会受到赞赏。

Answer 1

坚持使用jQuery

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

FIDDLE

Answer 2

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

DEMO

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

使用jQuery更改元素不透明度

2 个答案: