结合使用SVG图标和jQuery切换

Question

I'm using a jQuery toggle for a show/hide button. Is there a way to incorporate SVG icons (in this case, 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';
            });
        });
    });

Right now, this outputs:

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

Thank you!

Answer 1

Because you are setting text . Consider using html instead.

Additionally, I do not know what your base element is, but having svg's inside buttons or inputs might not be ideal. So you might want to use a button-looking span if you want to adhere to the standards.

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