Question

在我改用FA SVG之前，交换图标的工作非常简单-删除旧类，添加两个新类。使用SVG，事情变得更加复杂，虽然我可以交换图标，但无法对其进行动画处理...

HTML

<span id="myButton" class="btn btn-success">
    <i class="fas fa-check fa-fw fa-lg"></i> Click me
</span>

JS

$(document).on("click", "#myButton", function() {
    $(this).find("svg").attr("data-icon", "spinner").removeClass("fa-check").addClass("fa-spinner disabled");
});

我想念什么？

Answer 1

首先：为了更改数据属性，我建议使用.data()。

无论如何，您的问题与您忘记添加的课程有关： fa-spin 。

我建议使用.toggleClass()而不是添加和删除类。

摘要：

$(document).on("click", "#myButton", function(e) {
    var svg = $(this).find("svg");
    var newIcon = svg.data("icon") == 'check' ? 'spinner' : 'check';
    svg.data("icon", newIcon).toggleClass("fa-check fa-spinner fa-spin disabled");
});

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>


<span id="myButton" class="btn btn-success">
    <i class="fas fa-check fa-fw fa-lg"></i> Click me
</span>

在Fontawesome SVG中替换和设置动画图标

1 个答案: