如何在传入this参数时用jQuery切换按钮内的FontAwesome箭头图标

嘿，我来帮你搞定这个箭头样式切换的问题！你当前代码的核心问题是没有正确定位到按钮内部的<i>元素，反而直接给按钮本身添加/移除图标类——这当然不会生效，因为箭头的样式类是挂在<i>标签上的。咱们来修改代码：

核心思路 #

1. 从点击的按钮（也就是传入的btn参数）里找到内部的<i>元素
2. 同步手风琴的展开/关闭状态，切换箭头的上下类

修改后的完整代码 #

HTML部分（和你原来的一致，不用改）

<button type="button" class="btn btn-warning btn-sm" onclick="changeToggle(this)">
  <i class="fa fa-arrow-down"></i>
</button>

JavaScript部分（重点修改）

function changeToggle(btn) {
  // 1. 获取要切换显示的目标行
  const $targetRow = $(btn).closest("tr").next();
  // 2. 切换目标行的显示/隐藏
  $targetRow.toggle();
  
  // 3. 找到按钮内部的<i>图标元素
  const $arrowIcon = $(btn).find('i');
  // 4. 切换箭头的上下类（toggleClass会自动在两个类之间切换）
  $arrowIcon.toggleClass('fa-arrow-down fa-arrow-up');
}

为什么这样改？ #

• $(btn).find('i')：通过find方法从当前点击的按钮（btn）内部查找子元素<i>，完美解决你不知道如何定位图标的问题
• toggleClass('fa-arrow-down fa-arrow-up')：jQuery的这个方法会自动判断当前元素的类——如果有fa-arrow-down就移除它并添加fa-arrow-up，反之亦然，不用手动写判断逻辑，简洁又可靠

备选方案（手动判断状态） #

如果你想手动控制类的切换（比如需要额外逻辑），也可以根据目标行的可见状态来判断：

function changeToggle(btn) {
  const $targetRow = $(btn).closest("tr").next();
  $targetRow.toggle();
  
  const $arrowIcon = $(btn).find('i');
  // 判断目标行是否可见，来切换箭头方向
  if ($targetRow.is(':visible')) {
    $arrowIcon.removeClass('fa-arrow-down').addClass('fa-arrow-up');
  } else {
    $arrowIcon.removeClass('fa-arrow-up').addClass('fa-arrow-down');
  }
}

内容的提问来源于stack exchange，提问作者AliAzra