使用Javascript从具有属性选择器的CSS类更改属性的状态

Question

我有这个HTML行：

<div id="content" class="slide" data-position="left" ></div>

这个带有[[attribute]选择器的CSS类：

.slide[data-position="left"] {
    display: none;
}

我要做的是在点击一个按钮后，css类将使用Javascript更改

.slide[data-position="left"] {
    display: block;
}

我尝试了不同的方法，例如在HTML行中添加新类或添加内联样式=“display：block;”使用Javascript：

$(".slide").attr('data-position', 'left').css({'display':'block'});

生成

<div id="content" class="slide" data-position="left" style="display: block;"></div>

但.css（）方法对我没有帮助，因为我想更改/覆盖.slide [data-position =“left”]。内联不会改变CSS样式表中的任何内容。

我想知道如何更改具有某个[attribute]选择器的特定css类的属性状态。

我试图谷歌这个问题，但似乎没有人对此有答案。

有什么想法吗？

谢谢！

Answer 1

不是直接更改CSS规则，而是可以为另一个规则提供另一个类元素：

.slide.active { display: block; }

或者，如果属性仍具有重要性：

.slide.active[data-position="left"] { display: block; }

该规则应遵循现有规则，以确保＆＃34;滑动＆＃34;也有＆＃34;活跃＆＃34;班级将可见。

您可以使用

在JavaScript中添加该类

$("#content").addClass("active");

Answer 2

您可以通过更改jQuery选择器来实现此目的。目前，您正在使用jQuerys attr方法定位data-position属性并将其值设置为left。相反，您需要使用先前在CSS声明中使用的相同属性选择器：.slide[data-position=left]

您需要做的是改变这一点：

$(".slide").attr('data-position', 'left').css({'display':'block'});

到此：

$(".slide[data-position=left]").css({'display':'block'});

完整的jQuery看起来像这样：

$("#clickMe").on("click",function(){

    $(".slide[data-position=left]").css({'display':'block'});

});

Demo