jQueryの.htmlを（）私はクリック上の2つのSVGを切り替えしようとしている

Question

とトグルSVG：

$('.close').html() == '<svg class="btn_back"><use xlink:href="#btn_back"></use></svg>' ? $(this).html('<svg class="btn_i"><use xlink:href="#btn_i"></use></svg>') : $(this).html('<svg class="btn_back"><use xlink:href="#btn_back"></use></svg>'); 

HTMLは次のとおりです。最初に

<div class="back"><svg class="btn_i"><use xlink:href="#btn_i"></use></svg></div> 

コンテンツISTは置き換えクリックして、 btn_back svgが正しく表示されます。私が.closeを2回クリックすると、svgは変更されません。

は、.html()ツールが間違っていますか？

ありがとうございました！

Answer 1

これは私がそれを行う方法です：

私はそれにクラスをトグルします。それに基づいて、私は文字列を比較するよりも速いHTMLを切り替えるでしょう。また、.html()は必ずしも文字列を返すとは限りませんので、あなたはこれよりずっと安全だと思います。おそらく完璧ではないかもしれませんが、あなたのアプローチより少し良いです。

$(document).on('click','.close', function(e){ 
    var close = $(e.target).closest('.close'); 
    close.toggleClass('on'); 
    close.html(close.hasClass('on') ? 
    '<svg class="btn_i"><use xlink:href="#btn_i"></use></svg>', 
    '<svg class="btn_back"><use xlink:href="#btn_back"></use></svg>' 
    ); 
})