javascript - 更改 CSS :before if and ID has a specific class

Question

所以我试图让 Jquery 将特定的 css 更改为 :before 如果 div 具有特定的类

<ul>
 <li id="first" class="active">first</li>
 <li id="second">second</Li>
</ul>

如果第一个 li 处于事件状态，我希望 Ul 的 :before 具有特定的左右属性，但如果第二个 li 处于事件状态，它将具有不同的左右 我用 Jquery 添加类，我尝试做这样的事情

if ( $( "#first" ).is( "active" )) {
  $('ul[data-style-id='slider1']:before').append('<style>.left:175px;right:1188px;}</style>');
}

编辑: 我有一个 jquery 代码，它赋予它左右属性，但它只对第一个起作用，所以我尝试做一个不同的脚本来改变第一个，因为那个起作用了我试图给它答案中的属性但是具有每个 LI 的特定属性，但它再次起作用......它只读取第一个

https://jsfiddle.net/czf9kjfd/7/

在这里它工作得很好但是在我的浏览器中它不起作用所以我的问题是如果选择第一个链接我如何定义特定的左右参数

Answer 1

我认为你根本不需要 jQuery，它可以通过简单的 CSS 完成:

HTML

<ul>
<li id="first" class="line-item active">first</li>
<li id="second" class="line-item">second</Li>
</ul>

CSS

.line-item { /* Styles */ }
.line-item::before { /* Styles */ }
.line-item.active { /* Styles */ }
.line-item.active::before {
  left: 175px !important;
  right: 1188px !important;
}

.line-item 类只是一个常量引用。

希望对您有所帮助!