1

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

这是我当前的代码：

$('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。

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

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

出了什么问题？

4

2 回答 2

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]')”选择器不起作用，因为它会全部更新。

您可以设置一个 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');
    }
}
于 2018-03-13T19:19:57.963 回答
0

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

瑞安表示：

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

和：

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

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

我使用我的数据库中已经唯一的 uid 来分配一个名为 的 id taskid-#，无论页面上有多少，这都应该有效，因为该 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');
    }
}
于 2018-03-13T19:29:33.903 回答