如何使用骨干JS在Click事件上添加CSS屬性

Question

我正在嘗試在主干js中的click事件后添加css屬性。當我單擊.hero-content div時，我需要為hero-content div添加背景色。這是我的事件

 events: function () {
            if (vc.app.currentDevice.minWidth >= 769 && !!Modernizr.video) {
                return {
                    'click .hero-content': 'heroToggled',
                    'mouseenter .hero-content': 'NewGroup'
                   };
            }
            return {};
        },

和功能

heroToggled: function (evt) {
            var $heroContent = $(evt.currentTarget);
            var $backgroundToActivate = $heroContent.siblings('.hero-background');

               this.$backgrounds.css({
                opacity: 0,
                filter: 'alpha(opacity=0)'
            });
            $backgroundToActivate.css({
                opacity: 1,
                filter: 'alpha(opacity=100)'
            });

        },
 render: function () {
            this.$backgrounds = this.$('.hero-background');
            return this;
        }

這是我需要的，當我單擊.hero-content div時，我需要為hero-content div添加背景顏色，如下所示

html:not(.is-page-editor) .pdp-hero-group .fullscreen-hero:first-child .hero-content{
  border-color: #fff;
 background-color: rgba(255,255,255,.05);
}

我已經嘗試過如下所示，但無法正常工作

 this.$backgrounds1.css({
                    bordercolor: '#fff',
                    backgroundcolor: 'rgba(255,255,255,.05)'
                });
 render: function () {
                this.$backgrounds = this.$('.hero-background');
                this.$backgrounds1 = this.$('.hero-content');
                return this;
            }

如何使用骨干js實現這一目標？

Answer 1

從精美的jQuery css手冊中 ：

同樣，jQuery可以平等地解釋多字屬性的CSS和DOM格式。 例如，jQuery理解並返回.css( "background-color" )和.css( "backgroundColor" )的正確值。 這意味着混合大小寫具有特殊含義，例如， .css( "WiDtH" )與.css( "width" ) 。

因此，如果要更改background-color屬性，則需要說：

this.$backgrounds1.css({
    backgroundColor: 'rgba(255,255,255,.05)'
    // -------^
});

要么

this.$backgrounds1.css({
    'background-color': 'rgba(255,255,255,.05)'
// -^----------^-----^
});

同樣對於border-color 。