1

更新

使用：

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

似乎工作，同时使用：

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

才不是。知道为什么吗？

编码

jsFiddle 链接在这里：http: //jsfiddle.net/SeanKilleen/fwerK/

JavaScript 代码如下：

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% 不透明度，所有其他按钮都将消失。
  • 第二次，先前突出显示的元素消失了，但是单击的按钮不会变成 100% 的不透明度，尽管被赋予了“活动”css 类。
    • 我在活动类中添加了一个边框大小元素，以便验证这一点。单击的项目扩展其边框，但不会淡入 100% 不透明度。

我错过了什么？

4

1 回答 1

2

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

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

应该

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

更新的小提琴

于 2013-07-28T05:24:47.383 回答