1

我有一个从数据库返回更新值的 ajax 函数。它是在某个按钮的点击事件下实现的。

分区：

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

一个页面上大约有 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 函数的一部分，它在 click 函数上调用，这就是我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

this成功处理程序内部引用的对象与它在 ajax 调用外部引用的对象不同。

一种解决方案是使用self引用单击元素的闭包变量，然后在成功处理程序中使用它。还有其他一些变化

//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

您需要将用户单击的项目传递给成功函数。我会将您的代码更改为：

$('.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选项 in在成功回调中$.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 回答
1

您需要将其保存在onclick 上下文中，因为在 ajax-success 函数中this指的是其他上下文。你应该这样做：

$('.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 回答