Question

我有一个用PHP生成的列表，看起来像下面的HTML代码。我的AJAX调用成功完成，问题是我的状态消息仅显示在列表中的第一个div，我希望根据点击的input框显示它。所以我需要this对#status_message的引用，但我不确定如何使用它。

编辑：将ID更改为类

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/

使用$ this和Ajax调用成功处理程序

3 个答案: