0

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

4

2 回答 2

0

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

    //    });
    //});

});
于 2013-08-11T04:59:05.477 回答
0

尝试这个：

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

//    });
//});

});
于 2013-08-11T05:15:48.717 回答