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背景，并且＆＃34; hover＆＃34;规则将被添加回来）

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
});

EXAMPLE 1

OR 如果您想更改单个元素的类，可以像这样使用.toggleClass()：

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

EXAMPLE 2

Answer 2

@ jmore009的答案可能是最好的方法，但回答你的问题：jQuery简单地覆盖样式表规则，正如@webeno指出的那样。您可以通过将css属性设置为空字符串来恢复它们：

el.css({
        "background-color" : "",
        "color" : ""
      });

示例： http://jsfiddle.net/1ec10ncn/2/

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

2 个答案: