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）），但也没有效果。

当我检查对象上的元素时，chrome告诉我代码被激活，因为元素标记排序＆＃34;闪烁＆＃34;，但实际上没有任何数据被更改。

出了什么问题？

Answer 1

请参阅下面的更新...

原始回答：

此行为来自于使用'this'关键字以及处理动画字体 - 真棒图标的方式。正如我们在评论中所讨论的那样，它将标签替换为一个标签，然而，在阅读他们的文档时，我看到它在每次更改时都这样做，它非常动态。

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

解决方法是在成功回调函数中使用“$（'[data-fa-i2svg]'）”而不是“$（'this'）”。这是针对目前的控制。

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

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

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

<强>更新

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

您可以设置一个字体真棒属性，将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的回答很明显，但他的解决方案并不是我所需要的。

瑞安表示：

此行为来自于使用'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');
    }
}

使用jquery更新fontawesome属性

2 个答案: