表行切换上的 Jquery 更改图标

Question

现在我有以下 Jquery，当单击表格行时，它会关闭它下面的行。

<script type="text/javascript">
$(function () {
    $("tr.spaceUnder").hide();
    $('tr:not(.spaceUnder)').click(function () {
        $(this).nextUntil('tr:not(.spaceUnder)').toggle();
    });
});

现在我想要的是，当我单击切换其下行的行时，显示打开/关闭图标或 +/- 任何东西。

这就是带有开关的行的样子。

<tr class="countryRow categoryHeader">
        <td colspan="3" class="">
            <span class="listItemHeader">
                <%#((Item)Container.DataItem)["Name"]%>
            </span>
        </td>
        <td>
            <a href="#" style="float: right;"><img width="20"  src="/Images/sBackTopPic.png"></a>
        </td>
    </tr>

所以在切换时我想更改行中第二个 td 中 a href 上的 css 类，因此在初始加载时显示关闭图标，然后单击打开图标..然后再次单击关闭图标.所以我想知道如何使用我当前的切换逻辑在我的 a href 上添加 css 类。

Answer 1

您正在尝试做什么令人困惑。但是在您的点击功能下方，它会检查锚点以查看它是否具有类一，如果有，则删除该类并添加另一个类。如果不做相反的事情。

$(function () {
        $("tr.spaceUnder").hide();
        $('tr:not(.spaceUnder)').click(function () {
            $(this).nextUntil('tr:not(.spaceUnder)').toggle();
            if($('a', this).hasClass("class-one"))
            {
              $('a', this).removeClass("class-one");
              $('a', this).addClass("class-two");
            {
            else
            {
              $('a', this).removeClass("class-two");
              $('a', this).addClass("class-one");
            }
        });
    });