如何在用jQuery调用asp方法后更改按钮类

本文关键字：按钮 方法 asp jQuery 调用 | 更新日期: 2023-09-27 18:27:23

我有一个aspx网页，其中包含他们在运行时创建的500个按钮（输入类型="button"）。每个按钮都有这样的类：button-button-green，我用jQuery调用click方法。我的问题是：在完成从服务器到客户端的帖子后，我如何更改按钮的类并更改按钮类
这是我的代码：

<script type="text/javascript">
    $(document).ready(function() {
        $(".button").click(function() {
            var sid = '<%= Request.QueryString["SID"] %>';
            var m = '<%= Request.QueryString["M"] %>';
            var row = $(this).attr("value");
            var col = $(this).attr("SkinID");
            var classs = $(this).attr("class");
            $(this).attr("class", "button load");

            var DTO = {
                'sid': sid,
                'm': m,
                'row': row,
                'col': col
            };
            $.ajax({
                type: "POST",
                url: "WebService.asmx/AddChairs",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(DTO),
                success: function(response) {
                    var classs = $(this).attr("class");
                    $(classs).attr("class", "button button-blue");
                },
                error: function(response) {
                    alert(response.d)
                }
            });
        });
    });
</script>

注意：当我在java脚本代码上设置断点并检查$（this）时，vs显示这是未定义的。原因是什么？

如何在用jQuery调用asp方法后更改按钮类

问题是成功回调中的this没有引用单击的按钮，解决方案是使用闭包变量$btn，如下所示

$(document).ready(function () {
    $(".button").click(function () {
        //AddChairs();
        //return false;
        var $btn = $(this);
        var sid = '<%= Request.QueryString["SID"] %>';
        var m = '<%= Request.QueryString["M"] %>';
        var row = $btn.attr("value");
        var col = $btn.attr("SkinID");
        var classs = $btn.attr("class");
        $btn.attr("class", "button load");

        var DTO = { 'sid': sid, 'm': m, 'row': row, 'col': col };
        $.ajax({
            type: "POST",
            url: "WebService.asmx/AddChairs",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(DTO),
            success:
            function (response) {
                var classs = $btn.attr("class");
                $(classs).attr("class", "button button-blue");
                //$(".loader").removeClass("class");
                //if (response.d.mood) {
                //    //                        $("#a_countOrderDetail").html(response.d.value);
                //    $(this).attr("class", "button button-blue");
                //    alert(response.d.msg);
                //}
                //else {
                //    $(this).removeAttr("class");
                //    $(this).attr("class",classs );
                //    alert(response.d.msg);
                //}
            },
            error:
            function (response) {
                alert(response.d)
            }
        });
    });

    //$(document).on('click', '.button.load', function() {
    //AddChairs();
    //return false;
    //        ajaxFileUpload(1234)
    //var sid = '<%= Request.QueryString["SID"] %>';
    //var m = '<%= Request.QueryString["M"] %>';
    //var row = $(this).attr("value");
    //var col = $(this).attr("SkinID");
    //var classs = $(this).attr("class");
    //$(this).removeAttr("class");
    //$(this).attr("class", "button load");

    //var DTO = { 'sid': sid, 'm': m, 'row': row, 'col': col };
    //$.ajax({
    //type: "POST",
    //url: "WebService.asmx/AddChairs",
    //contentType: "application/json; charset=utf-8",
    //data: JSON.stringify(DTO),
    //        success:
    //            function (response) {
    //                if (response.d.mood) {
    //                    //                        $("#a_countOrderDetail").html(response.d.value);
    //                    $(this).removeClass("load");
    //                    $(this).addClass("class", "button button-blue");
    //                    alert(response.d.msg);
    //                }
    //                else {
    //                    $(this).removeClass("load");
    //                    $(this).addClass("class", classs);
    //                    alert(response.d.msg);
    //                }
    //            },
    //        error:
    //            function (response) {
    //                alert(response.d)
    //            }
    //    });
    //});
});

试试这个：

$(document).ready(function () {
        $(".button").click(function () {
            //AddChairs();
            //return false;
            var this_button=$(this);
            var sid = '<%= Request.QueryString["SID"] %>';
            var m = '<%= Request.QueryString["M"] %>';
            var row = $(this).attr("value");
            var col = $(this).attr("SkinID");
            var classs = $(this).attr("class");
            $(this).attr("class", "button load");

    var DTO = { 'sid': sid, 'm': m, 'row': row, 'col': col };
        $.ajax({
            type: "POST",
            url: "WebService.asmx/AddChairs",
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(DTO),
            success:
                function (response) {
                    this_button.removeClass('class_name_to_remove');
                    this_button.addClass('class_name_to_add');
                    //$(".loader").removeClass("class");
                    //if (response.d.mood) {
                    //    //                        $("#a_countOrderDetail").html(response.d.value);
                    //    $(this).attr("class", "button button-blue");
                    //    alert(response.d.msg);
                    //}
                    //else {
                    //    $(this).removeAttr("class");
                    //    $(this).attr("class",classs );
                    //    alert(response.d.msg);
                    //}
            },
            error:
                function (response) {
                    alert(response.d)
            }
        });
        });

    //$(document).on('click', '.button.load', function() {
    //AddChairs();
    //return false;
    //        ajaxFileUpload(1234)
    //var sid = '<%= Request.QueryString["SID"] %>';
    //var m = '<%= Request.QueryString["M"] %>';
    //var row = $(this).attr("value");
    //var col = $(this).attr("SkinID");
    //var classs = $(this).attr("class");
    //$(this).removeAttr("class");
    //$(this).attr("class", "button load");

    //var DTO = { 'sid': sid, 'm': m, 'row': row, 'col': col };
    //$.ajax({
        //type: "POST",
        //url: "WebService.asmx/AddChairs",
        //contentType: "application/json; charset=utf-8",
        //data: JSON.stringify(DTO),
//        success:
//            function (response) {
//                if (response.d.mood) {
//                    //                        $("#a_countOrderDetail").html(response.d.value);
//                    $(this).removeClass("load");
//                    $(this).addClass("class", "button button-blue");
//                    alert(response.d.msg);
//                }
//                else {
//                    $(this).removeClass("load");
//                    $(this).addClass("class", classs);
//                    alert(response.d.msg);
//                }
//            },
//        error:
//            function (response) {
//                alert(response.d)
//            }
//    });
//});
});
相关文章：