使用 jQuery .html() 切换 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>

第一次点击内容被替换，btn_back svg 正确显示。当我第二次点击 .close 时，svg 没有改变。

.html() 是不是用错了工具？

感谢您的帮助！

Answer 1

我会这样做：

我会在上面切换 class。基于此，我会切换 HTML，这比进行字符串比较更快。此外， .html() 并不总是 return 一个字符串，所以我认为你这样更安全。可能不完美，但比你的方法好一点。

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

使用 jQuery .html() 切换 SVG

Toggle SVG with jQuery .html()

jquery

svg

toggle