Question

我想在主干js中点击事件后添加一个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时我需要为英雄内容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 manual：

此外，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。

如何使用骨干js在点击事件上添加css属性

1 个答案: