在jquery中使用兄弟姐妹的正确方法？

Question

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

DIV：

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

页面上有大约10个相同的div重复。 up_arrow是用户单击的位置。

我正在尝试更新rep_count的数据， 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);
                }
            });
        }
    });
});

Answer 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)

Answer 2

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

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

Answer 3

问题是this并不是指成功回调中的clicked元素。

使用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
    },
    ...
});

Answer 4

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

$('.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);     
        }
    )
})