Question

我的aspx网页包含他们在运行时创建的500个按钮（输入类型=“按钮”）。每个按钮都有这个类：按钮按钮 - 绿色，我用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告诉我这是未定义的。是什么原因？

Answer 1

问题是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)
    //            }

    //    });
    //});

});

Answer 2

试试这个：

$(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)
//            }

//    });
//});

});

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

2 个答案: