Question

点击箭头＆＃39;图标，它在课程之间切换＆＃39; up＆＃39;并且＆＃39; down＆＃39;但是因为有很多＆＃39;箭头＆＃39;图标，当我点击另一个图标时，我希望前一个图片在将其添加到点击的箭头之前丢失了该图标（如果有的话）。我的JQUERY代码似乎工作正常，除了这种情况： enter image description here

*点击箭头（＆＃39; up＆＃39;类已添加）

*点击另一个箭头（＆＃39;向下＆＃39;类添加到上一个，＆＃39;向上＆＃39;添加到点击的箭头）

*点击另一个箭头（＆＃39;向下＆＃39;类添加到上一个，点击的箭头消失）

我的代码：

$('.accordion').click(function() {
  if($(this).find('i').hasClass('fa-angle-down')){
      $('i').addClass('fa-angle-down');
      $(this).find('i').toggleClass('fa-angle-down fa-angle-up');
} else {
  $(this).find('i').toggleClass('fa-angle-up fa-angle-down');
}
});

我的功能代码中存在任何逻辑缺陷。？

Answer 1

$('.accordion').click(function() {
  if($(this).find('i').hasClass('fa-angle-down'))
      $(this).find('i').removeClass('fa-angle-down').addClass('fa-angle-up');
  else 
      $(this).find('i').addClass('fa-angle-down').removeClass('fa-angle-up');
});

Answer 2

在@ Cr1xus方法的帮助下找到了解决方案。

$('.accordion-question').click(function() {
  if($(this).find('i').hasClass('fa-angle-down')){
      $('i').addClass('fa-angle-down');
      $(this).find('i').removeClass('fa-angle-down').addClass('fa-angle-up');
} else {
  $(this).find('i').addClass('fa-angle-down').removeClass('fa-angle-up');
}
});

jquery图标类切换单击

2 个答案: