Question

我有一个WordPress网站，其中有一些“管道”元素，我想在单击它们时更改颜色。我是jQuery新手，因此需要一些帮助。到目前为止，这就是我所拥有的（这是非常简化的版本）：

jQuery：

jQuery(function() {
  jQuery(".--clearGreen").click(function() {
    jQuery(this).addClass("--clearGreenClicked");
  });
});

CSS：

.--clearGreen {
 background-color: rgba(255, 255, 255, 0);
 border: 2px solid green;
}

.--clearGreenClicked {
 background-color: blue;
 border: 2px solid blue;
 color: white;
}

这可以将.--clearGreenClicked类添加到我在页面上单击的.--clearGreen“管道”中。我想实现的目标是，使仅单击的“管道”得到应用的更改，所有其他“管道”都恢复到原始样式，因此基本上，它们根据“管道”来“切换”样式单击。我尝试将.not与.has结合使用，但似乎无法正常使用。谢谢！

Answer 1

措辞：

只有单击的管道获得了更改，其他管道保留了原始样式”。

您的代码正是这样做的，因为您使用过$(this).addClass。

因此，假设您要询问“以及其他管道将返回到原始样式”，那么一次只能“选择”一个管道：

jQuery(function() {
  jQuery(".--clearGreen").click(function() {
    jQuery(".--clearGreenClicked").removeClass("--clearGreenClicked");
    jQuery(this).addClass("--clearGreenClicked");
  });
});

其他：

您可以使用.not减少所做的更改，例如：

jQuery(".--clearGreenClicked").not(this).removeClass("--clearGreenClicked");
jQuery(this).addClass("--clearGreenClicked");

这将阻止代码删除，然后重新添加类-如果CSS上有transition，则可能会有所不同。

Answer 2

<script type="text/javascript">
    jQuery(function () {
        jQuery(".--clearGreen").click(function () {
            jQuery(this).toggleClass("--clearGreenClicked");
        });
    });
</script>

Answer 3

使用UserAssembliesLoadPath函数删除类（如果存在），并添加类（如果不存在）。像这样：

toggleClass

点击时的jQuery开关类

3 个答案: