javascript - 更改 CSS 的 jQuery 函数

Question

我有以下功能：

$(document).ready(function () {
    $('.contents').hide();
    $('.slide').click(function () {
        var $this = $(this);
        $(this).siblings('.contents').slideToggle(200, function () {
            $this.text($(this).is(':visible') ? 'close' : 'open');
        });
    });
});

并想为点击功能添加更多功能。我是 jQuery 的新手，并尝试学习但仍然不明白阅读它。我以为我可以创建并附加一个 if 子句，但仍然为此苦苦挣扎。所以我有这样的事情：

$this.css($('.year').is(':visible') ? 'color', 'red' : 'color', 'green');
if the click function takes place and the .contents is visible change the css setting of .year to red and if not use color green

如果有人可以帮助我，那就太好了。

非常感谢。

Answer 1

也许这可能对您有用，但代码不如您的代码段简洁：

if ($(".year").is(":visible")) {
   $this.css({ "color" : "red" });
} else {
   $this.css({ "color" : "green" });
}

Answer 2

可能您正在寻找类似的东西

$this.css( 'color', $('.year').is(':visible') ? 'red' : 'green') );

您可能还必须检查如何is(':visible')处理从$('.year'). 当一些可见而另一些不可见时，可能会有所不同。

编辑：正如@a​​deneo 指出的，如果集合中的任何元素可见，is(':visible')则返回true 。

Answer 3

是你要找的吗？

http://jsfiddle.net/m6WrV/4/

$(document).ready(function () {
    $('.content').hide();
    $('.slide').click(function () {
        var $this = $(this);
        $(this).siblings('.content').slideToggle(200, function () {
            $this.text($(this).is(':visible') ? 'click to close' : 'click to open');
            $(this).closest('.aai').find('.head').css('color', $(this).is(':visible') ? 'red' : 'green');
        });

    });
});