javascript - 更改特定标签的类别

Question

我正在尝试将包含多个数据表的页面放在一起。由于页面可能会变长，我希望用户能够通过单击标题折叠表格。我计划使用 + 图标表示有更多内容可用，使用 - 图标表示它是可折叠的。所以我需要切换图标的 i 标签的类名。就像我说的，该页面可以包含多个具有相同 i tags 标签的表格，所以我需要一些东西来覆盖它

这是示例 HTML。

<table class="table table-bordered">
        <thead class="heading" id="thead">
      <tr id="tr">
         <th id="th" colspan="3"><i class="icon-plus"></i> Basic info</th>
      </tr>
    </thead>
    <tbody class="content">
        <tr>
          <td>Registration</td>
          <td>ABC 123</td>
          <td>&nbsp;</td>
        </tr>
        </tbody>
</table>

<table class="table table-bordered">
        <thead class="heading" id="thead">
      <tr id="tr">
         <th id="th" colspan="3"><i class="icon-plus"></i> More info</th>
      </tr>
    </thead>
    <tbody class="content">
        <tr>
          <td>Start time</td>
          <td>11:57</td>
          <td>&nbsp;</td>
        </tr>
        </tbody>
</table>

这是脚本

<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery('.content').show();
  jQuery('.heading').click(function()
  {
    jQuery(this).next('.content').slideToggle('0');
    jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus');
  });
});
</script>

tbody 的显示和隐藏工作正常，但我无法更改图标，有什么线索吗？

Answer 1

尝试改变

jQuery(this).parent().next("i").removeClass('icon-plus').addClass('icon-minus'); 

到

jQuery(this).find('i').toggleClass('icon-plus icon-minus');