0

以下のHTMLコードのようなPHPで生成されたリストがあります。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; 
    });
});
4

3 に答える 3

2

クリックされた要素への参照を保存する必要があります。これを試して：

$('.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; 
});
于 2012-12-03T21:48:05.507 に答える
1

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; 
    });
});
于 2012-12-03T21:50:03.470 に答える
1 
$.ajax({
    // setup...
    context: this,
    success : function(data) {
        var class data.error ? 'success' : 'failure';
        $(this).removeClass().addClass(class).text(data.msg);
    } 
});

参照：

于 2012-12-03T21:55:12.780 に答える