jQuery-addClass()与removeClass()

1.需求描述
通过js动态的新建、编辑、删除角色时需要对table列表的角色进行标记,当用户在input内修改角色名称或者角色备注后,点击提交按钮,修改成功后会更新列表内的信息。
2.代码

//表格内修改按钮触发事件
    $(function () {
        $("#tableList").delegate(".table_edit", "click", function () {
            var input = $('.box1 input');
            //标记正在编辑的表格行
            $(this).parent().parent().addClass('edit');
            var td = $(this).parent().parent().find('.td1');
            input[0].value = td.eq(1).text();
            input[1].value = td.eq(2).text();
            $('#add_button').css("display", "none");
            $('#edit_button').removeAttr('style');
        })
    });
 //编辑按钮事件-修改角色备注-ajax
    function edit_event() {
        var input = $('.box1 input');
        var ROLE_NAME = $('.box1 input')[0].value;
        var ROLE_REMARKS = $('.box1 input')[1].value;
        var type = "edit_role";
        var row = {};
        row.ID = $('.edit').find('.td1').eq(0).text();
        row.ROLE_NAME = ROLE_NAME;
        row.ROLE_REMARKS = ROLE_REMARKS;
        $.ajax({
            type: 'post',
            url: '../new/ajax/ajaxRight.aspx?type=' + type,
            data: JSON.stringify(row),
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            },
            processData: false,
            cache: false,
            success: function (reg) {
                //修改角色的描述
                $('.edit').find('.td1').eq(1).text(ROLE_NAME);
                $('.edit').find('.td1').eq(2).text(ROLE_REMARKS);
                $('.edit').removeClass('edit');
                $('#edit_button').css("display", "none");
                $('#add_button').removeAttr('style');
                input[0].value = "";
                input[1].value = "";
                alert(reg);
            },
            error: function () {
                $('#edit_button').css("display", "none");
                $('#add_button').removeAttr('style');
                $('#add_button').removeAttr('style');
                input[0].value = "";
                input[1].value = "";
                alert("角色修改失败!");
            }
        });
    }

3.遇到的问题和解决方法
修改成功后我需要removeClass(“edit”),但是一直会出问题,导致角色只能编辑一列。
原因是我写成了removeClass(“.edit”),区别在于不需要选择器符号。
可能说这个问题也可以换一个思路解决,比如removeClass(),将会移除所有的class,再比如attr(“class”,”“),只是这样做并不妥帖。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值