jquery - 将 $this 与 Ajax 调用成功处理程序一起使用

Question

我有一个使用 PHP 生成的列表，类似于下面的 HTML 代码。我的 AJAX 调用成功完成，问题是我的状态消息只显示div在列表中的第一个，我希望根据input单击的框显示它。所以我需要一个this参考，#status_message但我不知道如何使用它。

编辑：将 id 更改为 class

HTML：

<input type='textbox' class='update'>
<div class='status_message'> </div>

<input type='textbox' class='update'>
<div class='status_message'> </div>

<input type='textbox' class='update'>
<div class='status_message'> </div>

jQuery：

$(document).ready(function() {
    $('.update').live('click', function() {
        $.ajax({
            type : 'GET',
            url: '',
            dataType : 'json',
            data:  dataString ,
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                $('#status_message').removeClass().addClass('error').text('There was an error.').show(200);
            },
            success : function(data) {
                console.log(data);
                if (data.error === true) {
                    $('.status_message').removeClass().addClass('success').text(data.msg);
                }
                else {
                    $('.status_message').removeClass().addClass('failure').text(data.msg);
                }
            } 
        });    
        return false; 
    });
});

Answer 1

您需要存储对单击的元素的引用。尝试这个：

$('.update').live('click', function() {
    var $currentEl = $(this);
    $.ajax({
        // setup...
        success : function(data) {
            console.log(data);
            var className = data.error ? 'failure' : 'success';
            $currentEl.next().removeClass().addClass(className).text(data.msg);
        } 
    });    
    return false; 
});

Answer 2

您可以在调用 AJAX 函数之前尝试保存单击的元素：

$(document).ready(function() {
    $('.update').live('click', function() {
        var status_message = $(this).next('.status_message');
        $.ajax({
            type : 'GET',
            url: '',
            dataType : 'json',
            data:  dataString ,
            error : function(XMLHttpRequest, textStatus, errorThrown) {
                status_message.removeClass().addClass('error').text('There was an error.').show(200);
            },
            success : function(data) {
                console.log(data);
                if (data.error === true) {
                    status_message.removeClass().addClass('success').text(data.msg);
                }
                else {
                    status_message.removeClass().addClass('failure').text(data.msg);
                }
            } 
        });    
        return false; 
    });
});

Answer 3

$.ajax({
    // setup...
    context: this,
    success : function(data) {
        var class data.error ? 'success' : 'failure';
        $(this).removeClass().addClass(class).text(data.msg);
    } 
});

参考：

• api.jquery.com/jQuery.ajax/