解决方案：

Question

当我的AJAX调用回调完成时，我正在做两个动作：

使用notification()功能

通过删除类，添加类和替换文本（changeButton()函数中不言自明）来更改按钮。

$('.btn-material-yellow-600').click(function(){
    if($(this).text().trim() == "Add Me!") {
        $.ajax({
            type: 'post',
            url: '{{ URL('schedulizer/add') }}',
            data: {
                "class": ["Saab", "Volvo", "BMW"],
                _token: "{{ csrf_token() }}"
            },
            dataType: 'json'
        }).done(function(data){
            notification('Added', 'success');
            changeButton(
                $(this),
                'btn-material-yellow-600',
                'btn-danger',
                '\nRemove Me!'
            );
        });
        return false;
    }

这是changeButton：

    function changeButton(button, remove, add, text) {
        button.removeClass(remove);
        button.addClass(add);
        button.text(text);
    }

什么有效：

通知工作正常

什么行不通：

changeButton()不起作用。我很确定按钮更改不起作用的原因是因为我在回调中使用$(this)，当我必须调用其他内容时..或传入另一个变量..

不太确定..因为我对JS很新：/

检查控制台，我没有看到任何错误报告。

Answer 1

除了在ajax之外声明变量引用this之外，您还可以使用context选项告诉回调this是什么

$.ajax({
   context: this, // assigns what `this` is in callbacks
   type: 'post',
  ....
}).done(function(data){
    notification('Added', 'success');
    changeButton(
        $(this), 
        'btn-material-yellow-600',
        'btn-danger',
        '\nRemove Me!'
    );
});

Answer 2

是的！你是对的！及其简单的解决方案！

    $('.btn-material-yellow-600').click(function(){

   var localThis = $(this);

        if($(this).text().trim() == "Add Me!") {
            $.ajax({
                type: 'post',
                url: '{{ URL('schedulizer/add') }}',
                data: {
                    "class": ["Saab", "Volvo", "BMW"],
                    _token: "{{ csrf_token() }}"
                },
                dataType: 'json'
            }).done(function(data){
                notification('Added', 'success');
                changeButton(
                    localThis,
                    'btn-material-yellow-600',
                    'btn-danger',
                    '\nRemove Me!'
                );
            });
            return fa

Answer 3

是的，问题出在$(this)

应该做些什么：

$('.btn-material-yellow-600').click(function(){
    var $element = $(this);
    if($element.text().trim() == "Add Me!") {
        $.ajax({
            type: 'post',
            url: '{{ URL('schedulizer/add') }}',
            data: {
                "class": ["Saab", "Volvo", "BMW"],
                _token: "{{ csrf_token() }}"
            },
            dataType: 'json'
        }).done(function(data){
            notification('Added', 'success');
            changeButton(
                $element,
                'btn-material-yellow-600',
                'btn-danger',
                '\nRemove Me!'
            );
        });
        return false;
    });

推理是this仅适用于点击处理程序中的元素。在ajax内部，回调this指的是回调的上下文，它将是window。

Answer 4

$(this)引用由于回调中的闭包而导致的其他内容this是xhr设置对象。相反，您可以在ajax块之前定义变量，并在回调函数中使用它们。

//Before Ajax block
var elem = $(this);

在你的回调中：

changeButton(
            elem,
            'btn-material-yellow-600',
            'btn-danger',
            '\nRemove Me!'
        );

Answer 5

是的，这是由于这个

其他答案的代码可以使用。我想我可以解释一下这个

此指的是上下文。因此，无论何时使用它，您都应该看到方法/函数的所有者是谁，这个将引用该对象/变量。

在您的情况下此指的是为请求创建的AJAX对象。

解决方案：

将此存储在$ .ajax之前的其他变量中，并在完成中使用该变量 - 例如

 var that = this;
 ...
 .done(function(){
    changeButton(that, ...) 
 })

或者

如果您希望继续使用此，绑定 已完成功能，则此

.done(function(){
    changeButton(this, ...)  
}).bind(this)

在AJAX回调中更改按钮的文本和颜色

5 个答案:

解决方案：

或者