在 AJAX 个结果上使用 jquery 更改图标

Question

我在单击 link 后通过 AJAX 返回了一个列表。在列表中，我有一个很棒的字体 link 用于为列表条目添加书签。书签是通过 AJAX 完成的，这工作正常，我的数据库正在更新。

但是，更新后我想将书签图标从 fa-bookmark-o 更改为 fa-bookmark 并添加 class green 以使图标变为绿色。这是行不通的。代码如下。

HTML:

<a href="#" id="bookmark" class="bookmark" title="Bookmark" bookmark_id="12345"><i class="fa fa-bookmark-o"></i><i class="fa fa-bookmark"></i></a>

CSS

.bookmark:hover .fa-bookmark-o,
.bookmark .fa-bookmark 
{
color: #27ae60;
display: none;
text-decoration: none;
}
.bookmark:hover .fa-bookmark 
{
color: #27ae60;
display: inline;
text-decoration: none;
}

脚本

<script type="text/javascript">
    $(document).on('click', '#bookmark', function(e) {
        var bookmark_id = $(this).attr('bookmark_id');

        $("#loaderIcon").show();
        $.ajax({
            type: 'POST',
            url: '<?php echo base_url(); ?>bookmark',
            data: {'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>', bookmark_id},
            dataType: 'json',
            success:function(data){
                if(data.status == 'X')
                {
                    $(this).find('i').removeClass('fa-bookmark-o');
                    $(this).find('i').addClass('fa-bookmark');
                    $(this).find('i').addClass('green');
                }
            },
        });
    });
</script>

Answer 1

this 在 AJAX 调用的回调中与事件处理程序不同。

有多种解决方案，最简单的一种是将变量存储在闭包中并在 AJAX 处理程序中使用它

$(document).on('click', '#bookmark', function(e) {
    var me = $(this);
    var bookmark_id = me.attr('bookmark_id');

    $("#loaderIcon").show();
    $.ajax({
        type: 'POST',
        url: '<?php echo base_url(); ?>bookmark',
        data: {'<?php echo $this->security->get_csrf_token_name(); ?>' : '<?php echo $this->security->get_csrf_hash(); ?>', bookmark_id},
        dataType: 'json',
        success:function(data){
            if(data.status == 'X')
            {
                me.find('i').removeClass('fa-bookmark-o');
                me.find('i').addClass('fa-bookmark');
                me.find('i').addClass('green');
            }
        },
    });
  });

还有其他可能的改进，但我专注于用最少的更改来解决问题

其他方式：粗箭头函数，Function.bind

Answer 2

您应该将当前对象 $(this) 存储在一个变量中，然后在成功回调中使用它，因为成功回调中的 $(this) 指的是 [=19] 的 jqXHR 对象=] 调用，不再点击 bookmark:

$(document).on('click', '#bookmark', function(e) {
    var _this = $(this);
    ...
        success:function(data){
            if(data.status == 'X')
            {
                _this.find('i').removeClass('fa-bookmark-o');
                _this.find('i').addClass('fa-bookmark green');
            }
        },
    ...
 });

希望对您有所帮助。

在 AJAX 个结果上使用 jquery 更改图标

Change icon using jquery on AJAX results

ajax

jquery

font-awesome