根据按钮的属性值添加/删除 css 类

Posted 2023-05-08

【中文标题】根据按钮的属性值添加/删除 css 类

【英文标题】：Add / Remove css classes based on button's attribute value

【发布时间】：2019-10-04 21:40:43

【问题描述】：

我有一个展开/折叠导航菜单的按钮。我需要将按钮的图标从“左”箭头图标切换到“右”箭头图标。如何根据属性值更改此导航按钮的图标？ 我想用 jQuery 通过添加/删除 css 类来实现它。

<button class="t-Button t-Button--icon t-Button--header t-Button--headerTree" aria-label="Expand / Collapse Navigation" title="Expand / Collapse Navigation" id="t_Button_navControl" type="button" aria-controls="t_TreeNav" aria-expanded="true">
  <span class="fa-angle-double-left fa-lg" aria-hidden="true"></span>
</button>

$('.t-Header-controls button').on('classChange', function() 

$('.t-Header-controls button[aria-expanded="true"]').find('span').addClass('fa fa-angle-double-left fa-2x fa-lg');
$('.t-Header-controls button[aria-expanded="false"]').find('span').addClass('fa fa-angle-double-right fa-2x fa-lg');

);

我需要向 span 元素添加/删除类。 上面的代码不起作用。 基本上当按钮单击和按钮的属性 aria-expanded="false" 我需要删除 .fa-angle-double-left 类并添加 .fa-angle-double-right 类。但是当再次单击按钮并且按钮的属性 aria-expanded="true" 时，我需要删除 .fa-angle-double-right 类并添加 .fa-angle-double-left 类。

我看到，当侧边菜单打开（展开）时，按钮的“区域展开”属性变为“true”：aria-expanded="true" 此时我需要按钮的图标是“左”方向箭头 - “fa-angle-double-left fa-lg”类。

当侧边菜单关闭（折叠）时，按钮的“area-expanded”属性变为“false”：aria-expanded="false" 此时我需要按钮的图标是“右”方向箭头 - “fa-angle-double-right fa-lg”类。

请帮助找到正确的解决方案

【参考方案1】：

一个精简的方法是使用toggleClass。覆盖 CSS 中的图像 url 或字形并在点击时切换类。为活动类添加另一个选择器到您的 CSS 并更改图像。

例子：

<style>
.element 
 background-image: url(your icon);

.element.active 
 background-image: url(your other icon);

</style>
<script>
$(.element).click(function()
 $(this).toggleClass('active');

</script>

【讨论】：

再次单击按钮时我需要替换类。基本上当按钮单击和按钮的属性 aria-expanded="false" 我需要删除 .fa-angle-double-left 类并添加 .fa-angle-double-right 类。但是当再次单击按钮并且按钮的属性 aria-expanded="true" 时，我需要删除 .fa-angle-double-right 类并添加 .fa-angle-double-left 类。谢谢@britaingreen

【参考方案2】：

属性更改时不会引发事件。另一种方法是在您以编程方式更改属性时手动引发事件：

$('.t-Header-controls button').attr('aria-expanded','false').trigger('classChange');

// in another js file
$('.t-Header-controls button').on('classChange', function() 
    $('.t-Header-controls button[aria-expanded="true"]').find('span').addClass('fa fa-angle-double-left fa-2x fa-lg');
    $('.t-Header-controls button[aria-expanded="false"]').find('span').addClass('fa fa-angle-double-right fa-2x fa-lg');
);

【讨论】：

什么是 .container-fluid 类？谢谢

父div的类，包含按钮是.t-Header-controls 我的代码应该是：$('.t-Header-controls button').attr('aria-expanded' ,'false').trigger('classChange');

我还需要向 span 元素添加/删除类，而不是按钮本身。如何将跨度添加到您的代码中： $('.container-fluid button[aria-expanded="true"]').addClass('fa-angle-double-left fa-lg'); $('.container-fluid button[aria-expanded="false"]').addClass('fa-angle-double-right fa-lg');