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

Question

单击链接后，我通过 AJAX 返回了一个列表。在列表中，我有一个很棒的字体链接，用于为列表条目添加书签。书签是通过 AJAX 完成的，效果很好，我的数据库已更新。

但是，更新后我想将书签图标从 fa-bookmark-o 更改为 fa-bookmark 并添加类 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