使用 jQuery .html() 切换 SVG

菲利普·威廉·谢弗

我试图在点击时切换两个 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>

在第一次单击时，内容被替换并且btn_backsvg 显示正确。当我.close第二次单击时，svg 没有改变。

是.html()错误的工具吗？

谢谢你的帮助！

道

这就是我要做的：

我会在上面切换一个类。基于此，我会切换 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>'
    );
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。