给当前元素添加class，移除兄弟元素的class

最新推荐文章于 2023-08-02 21:52:45 发布

原创最新推荐文章于 2023-08-02 21:52:45 发布 · 1.2w 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种在点击事件中实现元素样式切换并更新数据字段的方法。通过使用jQuery的addClass和removeClass方法，可以轻松地为选中的元素添加特定样式，并从其他元素中移除该样式。同时，通过事件委托和数据属性，可以有效地更新当前下拉框所关联的数据字段，确保UI状态与数据状态的一致性。

需求：经常会遇到一种情况，选中某个元素，要求添加单独的样式，这时候我们一般用addClass('active')，同时要移除上一个添加active类的元素的active样式

{
    event:'click',
    selector:'li',
    callback:function (e) {
        //添加单独的样式
        $(e).siblings().removeClass('bgColor');
        $(e).addClass('bgColor');
        //当前下拉框所属字段
        this.data.supportAllData.currentField = $(e).parents('.person-select-box').attr('data-id');
        //选中的数据的格式
        this.data.supportAllData.choose={
            value:$(e).attr('data-value'), 
            name:$(e).attr('title'),
            py:$(e).attr('data-py')||[]
          };
        this.el.find('.person-select-box').attr('data-value',$(e.currentTarget).innerText);
    }
},