fontawesome 属性不使用 jquery 更新

Question

我正在使用 font-awesome SVG，之前我对 scope 有一些问题，但现在我遇到了一个新问题 - 我在对另一个问题的评论中询问了这个问题，并被告知这完全是单独的问题。

这是我当前的代码：

$('body').on('click','.switchButton', function(){
    $(this).attr('data-prefix', 'fas').attr('data-icon', 'spinner').addClass('fa-pulse');
    $.ajax({
        url: 'tasks/update_table.php',
        type: 'post',
        data: { "uid": $(this).attr('data-uid')},
        context: this,
        success: function(response) { 
            $(this).attr('data-icon', 'check-square').removeClass("fa-pulse");
            if(response == 1) {
                $(this).attr('data-prefix', 'far');
            } else {
                $(this).attr('data-prefix', 'fas');
            }
            console.log(this);
        }
    });
});

（注意：即使上面的 removeClass() 也没有 工作，似乎无法从成功函数内部更改元素？）

现在，当我执行console.log(this) 时，我得到了一些我觉得很奇怪的结果。

我第一次点击图标时，console.log() 我得到了这个结果：

<svg class="svg-inline--fa fa-square fa-w-14 fa-lg switchButton fa-pulse" data-uid="1" aria-hidden="true" data-prefix="fas" data-icon="check-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" data-fa-i2svg="">

每次之后，我总是得到这个结果：

<svg class="svg-inline--fa fa-spinner fa-w-16 fa-lg switchButton fa-pulse" data-uid="1" aria-hidden="true" data-prefix="far" data-icon="check-square" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg="">

并且图标在实际页面上永远不会改变，它只是保持作为微调器。我真的不明白这里出了什么问题。这似乎应该是一件很简单的事情，但对我不起作用。

元素最初在页面上加载为：

<i data-uid="<?=$task['uid'];?>" class="far fa-square fa-lg switchButton"></i>

而且我正在使用 font-awesome CDN 版本 v5.0.8。

我尝试了几件事，例如直接编辑属性，如您在此处看到的，我发现这是从this StackOverflow question 执行此操作的正确方法，我还尝试编辑 SVG 对象的实际类（$( this) 在 context )，但这也没有效果。

当我检查对象上的元素时，chrome 告诉我代码已激活，因为元素标签有点“闪烁”，但实际上没有任何数据被更改。

出了什么问题？

Answer 1

见下方更新...

原答案：

这种行为来自“this”关键字的使用和动画字体真棒图标的处理方式的组合。正如我们在 cmets 中讨论的那样，它用一个标签替换了标签，但是，在阅读他们的文档时，我发现每次更改都会这样做，这是非常动态的。

问题在于，当您将“this”关键字传递到您的 ajax 上下文时，您会锁定 svg 控件的该实例，但之后会被替换。因此，当您返回 'this' 时，您会看到旧控件上的类已成功更改，但新控件仍然具有微调器。

解决方案是在成功回调函数中使用“$('[data-fa-i2svg]')”而不是“$('this')”。以当前控件为目标。

我在这里找到了这个解决方案：

https://fontawesome.com/how-to-use/svg-with-js

它声明“如果您绝对需要将事件附加到图标，您可以使用 data-fa-i2svg 属性，但您需要允许动态创建 svg 元素。”

更新：

如果您在同一页面上有多个图标，则使用“$('[data-fa-i2svg]')”选择器不起作用，因为它会全部更新。

您可以设置一个 font awesome 属性，将 svg 嵌套在原始标签中，然后使用选择器获取该标签的子标签。这行得通，但是我认为 GrumpyCrouton 仅使用 $('#taskid-'+uidOfTask);在这种情况下可能更优雅。

由于这被标记为解决方案，因此我在下面包含了他的代码，但请参阅他的答案以获取更多详细信息。

success: function(response) { 
    var element = $('#taskid-'+uidOfTask);
    element.attr('data-icon', 'check-square').removeClass("fa-pulse");
    if(response == 1) {
        element.attr('data-prefix', 'far');
    } else {
        element.attr('data-prefix', 'fas');
    }
} 

Answer 2

Ryan Gibbs 的回答很到位，但他的解决方案并不是我所需要的。

Ryan 表示：

此行为来自“this”的组合使用 关键字和动画字体真棒图标的处理方式。

和：

解决方案是使用 "$('[data-fa-i2svg]')" 而不是 "$('this')" 在你的成功回调函数中。这针对 当前控制。

但是，这改变了页面上的 ALL 图标。这对我来说似乎是非常奇怪的默认行为，但不管我的解决方案是只为与此 onclick 事件相关的每个图标分配一个 ID。

我使用我数据库中已经唯一的 uid 来分配一个名为 taskid-# 的 id，无论页面上有多少个，这都应该有效，因为该 ID 始终是唯一的。

然后，在我的成功回调中，我没有使用 $(this)，而是直接通过它的 ID 调用该元素，这似乎有效。

success: function(response) { 
    var element = $('#taskid-'+uidOfTask);
    element.attr('data-icon', 'check-square').removeClass("fa-pulse");
    if(response == 1) {
        element.attr('data-prefix', 'far');
    } else {
        element.attr('data-prefix', 'fas');
    }
}