jquery - 单击时更改切换图标

Question

我是 jquery 的新手，试图在切换点击我的 rails 5 应用程序时切换字体真棒图标。我使用这个问题来实现该功能，但我没有看到图标更改效果。

<h2>Spanish <i id="click-spanish" class="fa fa-caret-down"></i></h2>

<div id="spanish-examples" class="initiallyHidden">
  etc.
</div>

和jQuery：

$(document).ready(function(){
  $('#click-spanish').click(function() {
    $('#spanish-examples').toggle('1000');
    $("i", this).toggleClass("fa-caret-down fa-caret-up");
  });
});

删除this上面的结果，但页面上的所有其他图标也会改变。

标签： jqueryruby-on-rails

Answer 1

$(document).ready(function(){
  $('#click-spanish').click(function() {
    $('#spanish-examples').toggle('1000');
    //"this" is the click-spanish icon, since you are inside the click handler
    //for that element.  You just have to use it, not try to find it.
    $(this).toggleClass("fa-caret-down fa-caret-up");
  });
});