javascript - 如何使用 jQuery 和 MaterializeCSS 让我的图标切换？

Question

在 MaterializeCSS 中有一个特定的语法来调用他们的预制图标。这是一个例子:

<i class="material-icons">expand_more</i>

框架根据 i 标签之间的文本知道您想要什么图标。我正在尝试使用 jQuery 创建一个可折叠的 div，我希望图标在上下箭头之间翻转。为此，我需要替换 i 标签之间的文本。

我成功地改变了它一次，但当我折叠 div 时却没有回来。这是我的代码:

$('.remove-text').click(function() {
  $(this).closest('.card').toggleClass('collapsed');
  if ($('.arrow-change').text = 'expand_more') {
    $('.arrow-change').text('expand_less');
  } else {
    $('.arrow-change').text('expand_more');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="remove-text">
  <i class="material-icons arrow-change">expand_more</i>
</div>

Answer 1

你使用=其实就是设置值，你真正想要的是==或者===，这是一个比较。

双等号不强制类型匹配，但三等号会。

此外，它是 text()，而不仅仅是 text，因为您使用的是 jQuery。如果你想使用 vanilla，那就是 innerText。