jquery 更改JS中的羽化图标

xoshrz7s 于 2023-01-01 发布在 jQuery

关注(0)|答案(3)|浏览(117)

我使用的是feathericons，我希望通过点击一个id为powerOn的图标来改变data-feather的属性，这是一个简单的电源按钮。
我试过：

const powerOn = $('#powerOn');
powerOn.attr('data-feather', 'stop-circle');

但那不起作用。我还看到API有一个replace()函数，但不太明白如何在这种情况下应用它。
我希望在再次单击按钮后将图标切换回其初始状态，如下所示：

powerOn.attr('data-feather', 'power');

JS、JQuery和library的新用户。
下面是我的HTML：

<button id="connectId"
        onclick="connect()"
        class="btn btn-sm btn-success"><i id="powerOn" data-feather="power"></i> Power On</button>

3条答案

试试这个：

const powerOn = $('#powerOn');
powerOn.replaceWith(feather.icons['stop-circle'].toSvg());

我需要替换整个html以具有如下切换功能：

const connectId = $('#connectId');
connectId.html(feather.icons['power'].toSvg() + ' Power On');

以及
第一个月
仅使用powerOn.replaceWith将删除<i>标记，因此图标不会始终显示。

使用jQuery更改属性，然后执行清理feather.replace()