Question

我运行的Wordpress网站由外行人编辑，没有编码能力。主页包含一个标准html链接列表（所有这些链接都由css全局设置为类似按钮），其链接文本由Font Awesome图标短代码和链接标题组成。

<a href="http://example.org/mypage/">[icon name="car"]Link Text</a>

对于用户添加另一个链接到主页，他们需要做的就是 - 在Visual Editor中 - 通过tinyMCE菜单选择一个Font Awesome图标，编写他们的链接文本，然后同时选择图标和通过tinyMCE“创建链接”按钮创建链接时的链接文本。

上面的Font Awesome短代码导致实际的html呈现如下：

<a href="http://mylink.org/mypage/"><i class="fa fa-car"></i>Link Text</a>

我的问题：当点击链接时，我希望当页面转换到链接目标时，该链接中包含的任何图标将被旋转的Font Awesome gear / cog图标替换，从而替换链接以下内容：

<a href="http://mylink.org/mypage/"><i class="fa fa-cog fa-spin"></i></i>Link Text</a>

我无法弄清楚如何实现这一目标。我通过jQuery尝试了很多方法，但我只是学习这种语言，似乎无法弄清楚如何做到这一点。

与此同时，我已经完成了一个解决方法，通过插入两个图标并使用：focus伪类在单击链接后显示和隐藏其中一个或另一个，但此解决方案似乎不适用于移动设备而且我不喜欢我希望用户每次都必须插入两个图标：

http://jsfiddle.net/qfnzmpzd/

任何需要个人制作链接以手动将类添加到shortcode / html的解决方案都不起作用。谢谢大家的帮助!!

Answer 1

由于您标记了jQuery，因此您可以添加.click()事件：

// When a link is clicked
$('a').click(function() {
    // If the link contains an icon
    if ( $(this).find('.fa').length ) {
        // Remove the icon
        $(this).find('.fa').remove();
        // Prepend the spinner
        $(this).prepend('<i class="fa fa-cog fa-spin"></i>');
    }
});

这是Fiddle。

如何在链接点击中使用不同的图标替换链接文本中的Font Awesome图标？

1 个答案: