与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'; }); }); });