jquery - 使用 AJAX 更改输入样式

Question

我有以下正常工作的 AJAX 代码，除了我想在刚刚检查的输入字段中添加类的部分。

输入字段：

<input type="text" class="solution" id="input_rebus" name="answer" />

AJAX 代码：

        $('.solution').on("change", function(){             
                var form_data = {
                name: $(this).val(),
                ajax: '1'
                    };
                $.ajax({
                    url: "<?php echo site_url('homework/submit'); ?>",
                    type:'POST',
                    data: form_data,
                    success: function(msg){
                        $('#message').html(msg);
                        this.addClass('solution_correct');
                        //outputs: Correct!
                        },
                    error: function(msg){
                        $('#message').html(msg);
                        this.addClass('solution_wrong');
                        //outputs: Wrong! Try again!
                        }

                    });

                return false;
            });
        </script>

所以，问题出在“this.addClass('...'); 我试过使用 $(this)，但这也不起作用。

这可能是非常愚蠢的事情，但我似乎无法弄清楚！

提前致谢 ：）

Answer 1

这是做到这一点的方法

        $('.solution').on("change", function(){   
            var $self = $(this);         
            var form_data = {
            name: $(this).val(),
            ajax: '1'
                };
            $.ajax({
                url: "<?php echo site_url('homework/submit'); ?>",
                type:'POST',
                data: form_data,
                success: function(msg){
                    $('#message').html(msg);
                    $self.addClass('solution_correct');
                    //outputs: Correct!
                    },
                error: function(msg){
                    $('#message').html(msg);
                    $self.addClass('solution_wrong');
                    //outputs: Wrong! Try again!
                    }

                });

            return false;
        });

Answer 2

您可以context在调用 $.ajax 时设置该属性，该属性将设置为this所有回调中的。

    $('.solution').on("change", function(){             
            var form_data = {
            name: $(this).val(),
            ajax: '1'
                };
            $.ajax({
                url: "<?php echo site_url('homework/submit'); ?>",
                type:'POST',
                context: $(this),//<--- here
                data: form_data,
                success: function(msg){
                    $('#message').html(msg);
                    this.addClass('solution_correct');
                    //outputs: Correct!
                    },
                error: function(msg){
                    $('#message').html(msg);
                    this.addClass('solution_wrong');
                    //outputs: Wrong! Try again!
                    }

                });

            return false;
        });
    </script>