javascript - Jquery toggleclass 不起作用

Question

我的 toggleclass 函数无法工作，我不知道为什么。感谢您的帮助!

jsfiddle: http://jsfiddle.net/t763P/1460/

<li id="toggle-favicon">
    <a href="#">Orders <span class="fas fa-chevron-left"></span></a>
    <ul class="nav nav-second-level">
        <li>
            <a href="#">File orders</a>
        </li>
        <li>
            <a href="#">Product orders</a>
        </li>
    </ul>
</li>

$('#toggle-favicon').click(function(){
    $(this).find('span').toggleClass('fa-chevron-left fa-chevron-down');
    console.log($(this).find('span'));
});

Answer 1

在最新版本的 font awesome 中，<span class="fas fa-chevron-left"></span>将转换为一些 SVG 元素。并移除对应的span元素。

因此，要更改图标的类别，您需要切换此 svg 元素的类别。

还要记住 .toggleClass不会在 svg 上工作元素为 jQuery v1.x不可以这样做。所以你需要使用 .attr("class" ... )方法。

$('#toggle-favicon').click(function() {
  var $el = $(this).find('svg');
  $el.attr("class", function() {
    return $(this).attr("class").indexOf("fa-chevron-left") != -1 ? "fa-chevron-right" : "fa-chevron-left";
  })
});

Fiddle

如果您使用 jQuery 3.x那么你可以使用 .toggleClass还有……

$('#toggle-favicon').click(function() {
  var $el = $(this).find('svg');
  $el.toggleClass("fa-chevron-left fa-chevron-right");
});

Fiddle