SVG Bascule avec jQuery .html()

Question

je suis en train de passer à deux svg clic:

$('.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>'); 

le code html est:

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

le premier cliquez sur le ist contenu remplacé et le btn_back svg est montré correctement. quand je clique sur .close la seconde fois que le svg ne change pas.

est le .html() le mauvais outil?

merci pour toute aide!

Answer 1

Voilà comment je le ferais:

Je bascule une classe sur elle. Sur cette base, je passerais HTML, ce qui est plus rapide que de faire une comparaison de chaînes. En outre, .html() ne renvoie pas toujours une chaîne, donc je pense que vous êtes beaucoup plus en sécurité comme ça. Probablement pas parfait, mais un peu mieux que votre approche.

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