Question

我的代码中有一个CSS类，它覆盖了一个特定库的类。使用此功能，我可以使用一个特定图像覆盖.libraryclass.libraryclass-something

#myobject .libraryclass.libraryclass-something {
    background: url("../../../images/Image1") no-repeat 0 0;    
}

现在我必须在我的JS中使用一个条件但是如果要使用Image1我需要使用Image2。我可以创建另一个类似于第一个指向Image2的类，但我不知道该怎么做，因为我总是需要覆盖类.libraryclass.libraryclass-something。

我们在JS文件中说。

If (a===1) {
    #myobject .libraryclass.libraryclass-something
}
else {
    ??? (because I need to respect the same name...)
}

Answer 1

You can create something like this.

#myobject .libraryclass.libraryclass-something.two {
    background: url("../../../images/Image2") no-repeat 0 0;    
}

这仍然会覆盖.libraryclass.libraryclass-something，但您可以添加.two来显示Image2。

Answer 2

执行此操作的两个步骤：

使用现有类的差异/添加创建一个新类。在您的情况下，您想要更改背景，因此使用新背景创建一个新类。
正如您现在所做的那样编写脚本并将此新类添加到元素中。你问题的片段：
```
else {
$('#myobject .libraryclass.libraryclass-something').addClass('newclass');
}
```

Answer 3

如果您使用的是jQuery，则可以使用switchClass方法

e.g。（来自jquery docs）

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>switchClass demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <style>
  div {
    width: 100px;
    height: 100px;
    background-color: #ccc;
  }
  .big {
    width: 200px;
    height: 200px;
  }
  .blue {
    background-color: #00f;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>

<div class="big"></div>

<script>
$( "div" ).click(function() {
  $( this ).switchClass( "big", "blue", 1000, "easeInOutQuad" );
});
</script>

</body>
</html>

覆盖CSS类

3 个答案: