jquery css change删除了一些css文件规则

Question

我注意到如果我使用jquery更改元素的css,它会删除已经为元素指定的一些css规则.

例如,

.className, .className2, etc... { 
   background-color: black;
   color    : silver;
}

.className:hover, .className2:hover, etc... { 
   background-color: gray;
   color    : white;
}

现在,如果用户单击此元素,我希望它永久更改背景以显示它已被单击,如果已单击另一个兄弟元素,它将丢失其jQuery-set css规则并返回到原始css-指定的规则(也就是说,它将丢失其rgba背景,并且将添加"悬停"规则)

highlightClicked : function (el) {
        el.css({
            "background-color" : "rgba(70, 70, 70, 0.7)",
            "color" : "white"
            });
        $('#parentElement > span').each(function () {   
            $($(this)).not(el).css({
                "background-color" : "rgba(70, 70, 70, 0.0)",
                "color" : "gray"
            });
        });
    },

但是jquery .css似乎删除了那些原始规则.

怎么能保存它们？

Answer 1

不是.css()用来改变元素样式,更有效的方法是添加/删除一个类:

HTML

//add a universal class to target with jquery, my example is .target
<div class="target className">className</div>
<div class="target className2">className2</div>

CSS

.active, .active:hover{ //don't add .active:hover if you want an actual hover state
  background-color:red; //Whatever style you want
  color: #FFF; //Whatever style you want
}

JQUERY

$(".target").click(function(){
  $(this).addClass("active").siblings(".target").removeClass("active"); //will add the class to the clicked element and remove it from anyothers
});

例1

或者,如果您想更改单个元素的类,您可以简单地使用.toggleClass()如下:

$(".target").click(function(){
   $(this).toggleClass("active");
});

例2