表行切换上的 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 中的 href 上的 css 类，因此在初始加载时显示关闭图标，然后单击打开图标..然后再次单击关闭图标.所以我想知道如何使用当前的切换逻辑在我的 href 上添加 css 类。

Answer 1

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

$(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");
            }
        });
    });