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