使用带有jQuery切换的SVG图标

Question

我使用jQuery切换显示/隐藏按钮。有没有办法合并SVG图标（在这种情况下，Octicons）？

$(function () {
        $('.show-button').click(function(){
            $(this).text(function(i,old){
                return old=='Show less' ?  'Show more {% octicon chevron-down height:25 class:"right left" aria-label:toggle %}' : 'Show less';
            });
        });
    });

现在，这输出：

[ Show more <svg height="25" class="octicon octicon-chevron-down right left" aria-label="toggle"...]

谢谢！

Answer 1

因为您正在设置text。请考虑使用html代替。

此外，我不知道你的基本元素是什么，但是使用svg的内部按钮或输入可能并不理想。因此，如果您想遵守标准，可能需要使用按钮式的范围。

Answer 2

你可以尝试一下！

$(function () { $('.show-button').click(function(){ $(this).html(function(i,old){ return old=='Show less' ? 'Show more {% octicon chevron-down height:25 class:"right left" aria-label:toggle %}' : 'Show less'; }); }); });