1

データベースから更新された値を返す ajax 関数を使用しています。特定のボタンのクリックイベントの下に実装されています。

DIV :

<div class="rep">
  <div class="up_arrow"></div>
  <div class="rep_count"></div>
</div>

1 ページに約 10 個の同じ div が繰り返されています。up_arrowユーザーがクリックする場所です。

のデータを更新しrep_count、 のクラスをup_arrowに変更しようとしていup_arrowedます。

Ajaxの成功機能：

success: function(data){
  $(this).addClass('.up_arrow').removeClass('.up_arrowed');
  $(this).css('background-position','0 40px');
  $(this).next('.rep_count').html(data);
}

この成功関数は、クリック関数で呼び出される ajax 関数の一部であり、thisその兄弟を参照するために使用している理由です。これは私が期待していることをしていません。siblingsの代わりに使ってみましnextたが、それも魔法のようではありません。

事前にご協力いただきありがとうございます。

編集： クリック機能：

$('.up_arrow').each(function() {
    $(this).click(function(event) {

        var resid = $(this).attr('name');

        var post_data = {
            'resid' : resid,
            '<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>'
        };

        if(resid){
            $.ajax({
                type: 'POST',
                url: "/ci_theyaw/restaurants/plusrepo",
                data: post_data,
                success: function(data){
                    //console.log($(this).siblings('.rep_count').text());
                    $(this).addClass('.up_arrow').removeClass('.up_arrowed');
                    //$(this).css('background-position','0 40px');
                    //$(this).next('.rep_count').html(data);
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(xhr.status);
                    console.log(xhr.responseText);
                    alert(thrownError);
                }
            });
        }
    });
});
4

4 に答える 4

1

ajax-success 関数では、これは他のコンテキストを参照するため、これを onclick コンテキストで保存する必要があります。次のようにする必要があります。

$('.up_arrow').on('click', function() {
    var self = this; // save this refering to <a>
    $.ajax(.....,
        success: function() {
           // this - refers to success-function context, but self - refers to 'a'-onclick handler
            $(self).addClass('.up_arrow').removeClass('.up_arrowed');
            $(self).css('background-position','0 40px');
            $(self).next('.rep_count').html(data);     
        }
    )
})
于 2013-09-21T08:27:20.010 に答える
1

this成功ハンドラーの内部では、ajax 呼び出しの外部で参照していたのと同じオブジェクトを参照していません。

self1 つの解決策は、クリックされた要素を参照するクロージャー変数を使用し、それを成功ハンドラーで使用することです。また、その他の変更点はほとんどありません

//there is no need to use .each() here
$('.up_arrow').click(function () {
    var resid = $(this).attr('name');
    var post_data = {
        'resid': resid,
            '<?php echo $this->security->get_csrf_token_name(); ?>': '<?php echo $this->security->get_csrf_hash(); ?>'
    };

    var self = this;
    if (resid) {
        $.ajax({
            type: 'POST',
            url: "/ci_theyaw/restaurants/plusrepo",
            data: post_data,
            success: function (data) {
                //console.log($(this).siblings('.rep_count').text());

                //you had swapped the class names here also should not use . in front of the class name, it is used only for class selector
                $(self).addClass('up_arrowed').removeClass('up_arrow');
                //$(this).css('background-position','0 40px');
                //$(this).next('.rep_count').html(data);
            },
            error: function (xhr, ajaxOptions, thrownError) {
                alert(xhr.status);
                console.log(xhr.responseText);
                alert(thrownError);
            }
        });
    }
});

別の解決策は、以下に示すように $.proxy を使用してカスタム コンテキストを渡すことです。

success: $.proxy(function(data){
  $(this).addClass('.up_arrow').removeClass('.up_arrowed');
  $(this).css('background-position','0 40px');
  $(this).next('.rep_count').html(data);
}, this)
于 2013-09-21T08:23:11.050 に答える
1

ユーザーがクリックした項目を success 関数に渡す必要があります。コードを次のように変更します。

$('.up_arrow').click(function() {
    //you don't need an .each() loop to bind the events    

    var TheClickedItem = $(this);
    .......

    success: function(data){ 
       //now you're accessing/modifying the item that was actually clicked.
       TheClickedItem.addClass('.up_arrow').removeClass('.up_arrowed');
       TheClickedItem.....
    }
于 2013-09-21T08:23:51.837 に答える
1

問題はthis、成功のコールバック内でクリックされた要素を参照していないことです。

contextオプションを使用して、成功コールバック内で$.ajax必要なものを指定します。this

$.ajax({
    ...
    context: $(this), // now the clicked element will be `this` inside the callback
    ...
    success: function(data) {
        // here 'this' refers to the clicked element now
    },
    ...
});
于 2013-09-21T08:25:17.890 に答える