jQuery淡入活跃元素，淡出不活跃元素

Question

更新

使用：

$(event.currentTarget).fadeTo(0, 1);

在使用时似乎可以工作：

$('.btn .active').fadeTo(0, 1);

才不是。 知道为什么吗？

编码

此处的jsFiddle链接： http : //jsfiddle.net/SeanKilleen/fwerK/

下面的JavasScript代码：

var global_loggedOnUser = "User1";

$(document).ready(function () {

    var viewmodel = (function () {
        this.feedbacktype = ko.observable("None");
        this.currentPage = ko.observable(location.href);
        this.currentUsername = global_loggedOnUser;

        this.updateFeedbackType = function (item, event) {
            var newText = $(event.currentTarget).children("span").text();
            $('#buttonList button').removeClass('active');
            $(event.currentTarget).addClass('active');

            feedbacktype(newText);
            $('.btn').not('.active').fadeTo('fast', 0.3);
            $('.btn .active').fadeTo('fast', 1);
        };



        return {
            pageUserIsOn: currentPage,
            theUser: currentUsername,
            feedbackType: feedbacktype
        };
    })();


    ko.applyBindings(viewmodel);
});

目标

• 我有一个按钮列表。
• 当某人单击按钮时，我要确保他们单击的按钮变为100％不透明，其余按钮变为30％的容量。

我正在尝试通过向按钮添加“活动”类并将其从所有其他按钮中删除，然后基于该类执行淡入淡出来实现此目的。

问题

• 第一次单击，它可以正常工作。 单击的按钮的不透明度为100％，所有其他按钮都消失。
• 第二次，以前突出显示的元素消失了，但是尽管被赋予了“活动的” css类，但单击的按钮仍未达到100％不透明度。
  • 我在活动类中添加了border-size元素，因此可以进行验证。 单击的项目会扩展其边框，但不会淡入100％的不透明度。

我想念什么？

Answer 1

删除类之间的空间，您要选择两个类都不是.active后代的.btn

$('.btn .active').fadeTo('fast', 1);

应该

$('.btn.active').fadeTo('fast', 1);

更新的小提琴